• 原生js事件委托(事件代理)方法扩展


    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法

    /**
     * 事件委托方法
     * @param eventName {string}:事件名称,如'click'
     * @param sub {string}: 子节点选择器,如'.sub-item'
     * @param fn {function}: 事件回调方法
     * @eg var ctn = document.querySelector('#menu_container');
     *         ctn.delegate('click','.sub-item',function(event){ console.log('clicked ...'); });
     **/
    Node.prototype.delegate = function(eventName, sub, fn) { // DOM 继承于 Node (原型链顶端是 Object)
      var _sef = this;
      this.addEventListener(eventName, function(event) {
        var target = event.target || event.srcElement, // srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用
          list = _sef.querySelectorAll(sub); 
        if (list && Array.from(list).includes(target)) {
          if (typeof fn == 'function') fn.apply(target, arguments);
        }
      }, false);
    }

    使用参考备注里的说明。

  • 相关阅读:
    HttpClient
    充值保存
    button 样式
    创建窗口
    第十一次作业
    第十次作业
    第九次作业
    第八次作业
    第七次作业
    第六次作业
  • 原文地址:https://www.cnblogs.com/xtreme/p/10910677.html
Copyright © 2020-2023  润新知