javascript - 当使用 true 调用 addEventListener() 时，removeEventListener() 不起作用

Question

我正在自学 JavaScript，遇到了一种情况，如果我在捕获阶段和冒泡阶段调用事件监听器，则删除该监听器不起作用。

function clickHandler(e, objId, num) {
  var obj = document.getElementById(objId);
  obj.innerHTML = "DIV " + num + " says " + " at X position: " + e.screenX;
}

function wrapperOne(e) {
  clickHandler(e, "heading", 1);
  e.target.removeEventListener('click', wrapperOne);
}

function wrapperTwo(e) {
  clickHandler(e, "heading", 2);
  e.target.removeEventListener('click', wrapperTwo);
}

function onloadHandler() {
  document.getElementById("div1").addEventListener('click', wrapperOne, true);
  document.getElementById("div2").addEventListener('click', wrapperTwo, true);
}

使用此代码，即使在调用 removeEventListener 函数之后，我也可以继续调用 wrapperOne 和 wrapperTwo。如果我在 onloadHandler 的 addEventListener 中传递 false ，那么事件处理程序就会被删除。有人可以解释这两种不同的行为吗？

Answer 1

使用e.target.removeEventListener('click',wrapperOne,true);

addEventListener 和removeEventListener 的第三个参数是useCapture 参数。要支持跨浏览器，您必须在 addEventListener 和 removeEventListener

上指定该 bool 值

当您在 addEventListener 中使用 false 时，removeEventListener 起作用的原因是 false 是useCapture 参数。 如果您在“捕获”阶段附加了一个事件，那么您必须告诉它从“捕获”阶段删除该事件。

参见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener了解更多信息。