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

 

使用參考備注里的說明。