Home > Article > Web Front-end > riot.js learning [three] events
For each custom tag, from compilation to construction to final destruction, riot.js provides corresponding events.
There are 4 built-in events:
update
Executed before the label actually refreshes the UI. It allows us to rewrite the context data before updating the UI
updated
It is executed after the label UI is updated. At this time, we can operate the dom
mount
After the tag is built and placed on the page, it is executed.
unmount
Executed when the tag is removed from the page. [Generally executed when this.unmount() is called]
Take an example:
[code]<!Doctype html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="riot.js"></script> <script type="text/javascript" src="compiler.js"></script> </head> <body> <todo></todo> </body> <!-- 最前面一定要有空格或TAB --> <script type="riot/tag"> <todo> <p>一个自定义标签 BY { title || "" }</p> // 监听4种事件 // 执行顺序,跟绑定顺序无关 this.on("updated", function(){ // 这里可以操纵DOM console.log("updated"); }).on("mount", function(){ console.log("mount"); }).on("unmount", function(){ console.log("unmount"); }).on("update", function(){ // 这里可以注入数据 this.title = "da宗熊"; console.log("update"); }); </todo> </script> <script type="text/javascript"> riot.mount("todo"); </script> </html>
The effect is as follows:
The output is as follows: : update -> updated -> mount
Because this.unmount();
is not called, the binding of the unmount
event is not printed out, it can also be similar Same as jquery, bind multiple events at one time, or trigger the event yourself
Bind multiple:
[code]this.on("update mount", function(){ // update和mount都会经过这里 });
Trigger event:
[code]this.trigger("update", "参数1", "参数2"...);
Newbie’s pitfall:
The unmount event is triggered after this.unmount(), or a custom label is automatically triggered when rebuilding
[code]riot.mount("todo"); riot.mount("todo"); // 第二次会先触发unmount,然后才是update/updated/mount
[code]this.on("update", function(a, b){ console.log(a, b); // 1, 2 }); this.trigger("update", 1, 2);
This is very different from jquery
The above is the content of the riot.js learning [three] event. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!