我创建了以下极其基本的模块来处理事件委托。创建委托的侦听器很好。
export const delegate = (function() {
const events = {};
return ({
base = 'document',
selector,
type,
callback,
listenerName,
remove = false,
useCapture = false
}) => {
events[listenerName] = function(e) {
for (
let target = e.target;
target && target !== this;
target = target.parentNode
) {
if (target.matches(selector)) {
callback.call(target, e);
break;
}
}
};
if (remove) {
window[base].removeEventListener(type, events[listenerName], useCapture);
delete events[listenerName];
return;
}
window[base].addEventListener(type, events[listenerName], useCapture);
};
})();
这样称呼:
delegate({...configWithRemoveNotSet})
我还创建了一个临时助手来测试删除以前添加的事件侦听器的能力,方法是传递与添加侦听器相同的所有值,但将布尔值remove
翻转为{{1} }。
true
我可以验证是否已从window.testRemoveListener = () => delegate({...sameConfigWithRemoveSetToTrue});
对象中正确删除了侦听器功能,并且还调用了events
。
我希望我的测试功能可以删除以前添加的事件侦听器。但是听众会继续开火。
感谢您对我在这里做错的任何想法。