我正在使用原生 DOM 的 addEventListener
事件,如下所示:
const domElement = document.getElementById('ember464');
domElement.addEventListener('click', dosomething);
this._listeners.push({target: domElement, type: 'click', callback: dosomething});
这注册了事件并将其存储在 _listeners
数组中,以便稍后可以清理。好消息是,此事件确实附加到 DOM,但尽管事件目标的范围明确仅限于单个按钮,但每当在文档上的任何地方检测到单击时,处理程序似乎都会触发! p>
我做错了什么吗?
附:这是浏览器检查器查看 _listener
数组...请注意,突出显示“目标”确实仅指向我尝试定位的按钮。 AKA,目标是 DOM 节点,而不是用于标识节点的选择器。
我现在查看了目标 DOM 元素上的调试器,并看到以下内容:
<小时/>对于任何足够勇敢的人来说,这里有一个代码的工作演示。第二个按钮由“click”事件触发是本期的主题:
完整的源代码在这里:link
最佳答案
好的,问题出在我没有在问题中说明的一些代码中。现代浏览器都支持 DOM 方法 addEventListener
,但为了支持只有 attachEvent
的旧版浏览器,我添加了以下抽象:
registerListener(target, type, callback) {
const addListener = target.addEventListener || target.attachEvent;
const eventName = target.addEventListener ? type : 'on' + type;
addListener(eventName, callback);
},
问题是“this”上下文在调用中丢失了。所以我改为以下内容:
registerListener(target, type, callback) {
const listenerFunction = target.addEventListener ? 'addEventListener' : 'attachEvent';
const eventName = target.addEventListener ? type : 'on' + type;
target[listenerFunction](eventName, callback);
},
关于javascript - addEventListener 未附加到正确的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36390833/