removeEventListener() 在 addEventListener() 使用 true 调用时不起作用

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上指定该布尔值

在

addEventListener 中使用 false 时removeEventListener工作的原因是false 是 useCapture 参数的默认值。如果您在"捕获"阶段附加了一个事件，则必须告诉它从"捕获"阶段中删除该事件。

有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener。