本文详解Layui框架中onevent与event的使用机制。通过示例说明如何定义组、父级方法及子级方法,并演示利用event触发指定事件及父级事件的完整流程,帮助开发者掌握自定义模块事件的配置与调用。
Layui事件定义与调用机制
以下内容为官方文档的相关说明。
| layui.onevent(modName, events, callback) | 自定义模块事件,属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块 |
| layui.event(modName, events, params) | 执行自定义模块事件,搭配onevent使用 |
第一个参数可视为事件分组,在定义子级方法或使用event进行调用时,必须确保该参数保持一致。
第二个参数用于定义父级方法名。若需定义该方法的子方法,同样使用onevent,但第二个参数需与父级方法名相同并加上括号。
例如在代码中的data方法,其子方法定义为data(1)。
当使用layui.event方法调用data(1)时,将同时触发data(1)和data方法。
//监听Tab切换,以改变地址hash值
element.on("tab(test)", function() {
// location.hash = "test=" + this.getAttribute("lay-id");
//使用event调用data(1)方法并传入参数,这时候这里会触发data方法和data(1)方法
layui.event('groupData','data(1)',this.getAttribute("lay-id"));
});
//定义父级方法data
layui.onevent('groupData','data',function(gid){
console.log(gid);
});
//定义子方法data(1)
layui.onevent('groupData','data(1)',function(gid){
console.log(1321321);
});
以上内容基于个人使用经验总结,如有错误欢迎指正。
以上就是Layui中onevent和event的使用详解,希望能提供参考,感谢支持。