问答

对 Layui 的事件监听有些疑问,求帮忙分析一下这几行代码

作者:admin 2021-04-22 我要评论

先看下 Layui 文档的描述,比如监听选项卡切换这一节 监听选项卡切换 : “Tab 选项卡点击切换时触发,回调函数返回一个 object 参数,携带两个成员:” element...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

先看下 Layui 文档的描述,比如监听选项卡切换这一节监听选项卡切换
“Tab 选项卡点击切换时触发,回调函数返回一个 object 参数,携带两个成员:”

element.on('tab(filter)', function(data){
  console.log(this);        //当前 Tab 标题所在的原始 DOM 元素
  console.log(data.index);  //得到当前 Tab 的所在下标
  console.log(data.elem);   //得到当前的 Tab 大容器
});

疑问在于:
如果我们用比较原始的方法来监听 Tab 选项卡点击切换时触发,可能是这样写:

eleTab.addEventListener("click", function(event) {
 // 点击 Tab 选项卡时触发该函数
})

可以看到与 Layui 的写法从外观形式上就有很大的差别。 Layui 做了哪些封装呢?Layui 上面的写法并没有看到它监听 click 事件啊,为啥在点击 Tab 选项卡时会触发?
我觉得可能是与以下源码有关,但看不出重点。
element.js

  Element.prototype.on = function(events, callback){
    return layui.onevent.call(this, MOD_NAME, events, callback);
  };

layui.js

 //自定义模块事件
  Layui.prototype.onevent = function(modName, events, callback){
    if(typeof modName !== 'string' 
    || typeof callback !== 'function') return this;

    return Layui.event(modName, events, null, callback);
  };

  //执行自定义模块事件
  Layui.prototype.event = Layui.event = function(modName, events, params, fn){
    var that = this
    ,result = null
    ,filter = (events || '').match(/\((.*)\)$/)||[] //提取事件过滤器字符结构,如:select(xxx)
    ,eventName = (modName + '.'+ events).replace(filter[0], '') //获取事件名称,如:form.select
    ,filterName = filter[1] || '' //获取过滤器名称,,如:xxx
    ,callback = function(_, item){
      var res = item && item.call(that, params);
      res === false && result === null && (result = false);
    };
    
    //如果参数传入特定字符,则执行移除事件
    if(params === 'LAYUI-EVENT-REMOVE'){
      delete (that.cache.event[eventName] || {})[filterName];
      return that;
    }
    
    //添加事件
    if(fn){
      config.event[eventName] = config.event[eventName] || {};

      //这里不再对多次事件监听做支持,避免更多麻烦
      //config.event[eventName][filterName] ? config.event[eventName][filterName].push(fn) : 
      config.event[eventName][filterName] = [fn];
      return this;
    }
    
    //执行事件回调
    layui.each(config.event[eventName], function(key, item){
      //执行当前模块的全部事件
      if(filterName === '{*}'){
        layui.each(item, callback);
        return;
      }
      
      //执行指定事件
      key === '' && layui.each(item, callback);
      (filterName && key === filterName) && layui.each(item, callback);
    });
    
    return result;
  };
###

当然人家源码里监听 click 事件啊,为啥是你代码里要监听?

事件触发:https://github.com/sentsin/la...
 
封装调用:https://github.com/sentsin/la...
 
监听 click 事件:https://github.com/sentsin/la...

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 求助!Mysql workbench connections出

    求助!Mysql workbench connections出

  • c++ 的dll 转golang可以调用

    c++ 的dll 转golang可以调用

  • c++的 new int{10}  和 new int(10) 有

    c++的 new int{10} 和 new int(10) 有

  • Grafana MySQL为数据源时, 折线图无法

    Grafana MySQL为数据源时, 折线图无法

腾讯云代理商
海外云服务器