原生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); }
使用参考备注里的说明。