原生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);
}

 

使用参考备注里的说明。