每个自定义标签从编译到构建，到最后的销毁，riot.js都提供了相应的事件。
内置有4种事件：
update
在标签真正刷新ui前执行。它允许我们在更新ui前，改写context的数据
updated
在标签ui更新之后执行。这时候，我们可以对dom进行操作了
mount
在标签构建完成，放在页面后执行。
unmount
当标签从页面移除的时候执行。【一般是调用this.unmount()时执行】
打个例子：
[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>效果如下：
输出分别为: update -> updated -> mount
因为没有调用this.unmount();
所以没打印出 unmount
事件的绑定，也可以类似jquery一样，一次绑定多个事件，又或者自己去触发事件
绑定多个：
[code]this.on("update mount", function(){
// update和mount都会经过这里
});触发事件：
[code]this.trigger("update", "参数1", "参数2"...);新手遇坑：
unmount事件，在this.unmount()之后触发，或者自定义标签，重新构建时，自动触发
[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);这一点跟jquery是大大的不一样
以上就是riot.js学习【三】事件的内容，更多相关内容请关注PHP中文网（www.php.cn）！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
357
