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

上指定该布尔值

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

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

当addEventListener（）调用true时，removeEventListener（）不起作用

1 个答案: