javascript - addEventListener 未附加到正确的范围

Question

我正在使用原生 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”事件触发是本期的主题:

https://ui-animate.firebaseapp.com/

完整的源代码在这里:link

Answer 1

好的，问题出在我没有在问题中说明的一些代码中。现代浏览器都支持 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);
},