无法理解addEventListener中的useCapture参数

一尘不染

无法理解addEventListener中的useCapture参数

javascript

无法理解useCapture属性。定义有：

如果为true，useCapture指示用户希望启动捕获。启动捕获后，所有指定类型的事件都将分派给已注册的侦听器，然后才分派给DOM树中其下的任何EventTarget。在树中冒泡的事件不会触发指定使用捕获的侦听器。

在此代码中，parent事件在child之前触发，因此我无法理解其行为。Document对象的usecapture为true，child
div的usecapture设置为false，并且遵循了useuseture的文档。因此为什么document属性优先于child。

function load() {

  document.addEventListener("click", function() {

    alert("parent event");

  }, true);



  document.getElementById("div1").addEventListener("click", function() {

    alert("child event");

  }, false);

}


<body onload="load()">

  <div id="div1">click me</div>

</body>

阅读 310

2020-05-01

共1个答案

一尘不染

可以在两种情况下激活事件：在开始（“捕获”）和结束（“气泡”）。事件按照其定义的顺序执行。假设您定义了4个事件监听器：

window.addEventListener("click", function(){console.log(1)}, false);

window.addEventListener("click", function(){console.log(2)}, true);

window.addEventListener("click", function(){console.log(3)}, false);

window.addEventListener("click", function(){console.log(4)}, true);

日志消息将按以下顺序显示：

2（首先使用定义capture=true）
4（使用定义秒capture=true）
1（带有的第一个定义的事件capture=false）
3（带有的第二个已定义事件capture=false）

2020-05-01