Layui中onevent与event的用法解析

作者:工具松鼠时间:2026-10-23 10:53:31浏览:359

本文详解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的使用详解,希望能提供参考,感谢支持。

作者最新文章