Javascript 无法理解 addEventListener 中的 useCapture 参数

发布于09月13日

我读过https://developer.mozilla.org/en/DOM/element.addEventListener篇文章，但无法理解useCapture的属性.定义如下:

如果为true，则useCapture表示用户希望启动捕获.在启动捕获之后，指定类型的所有事件将被调度到注册的侦听器，然后再被调度到DOM树中其下的任何EventTargets.在树中向上冒泡的事件不会触发指定使用捕获的侦听器.

在这段代码中，父事件先于子事件触发，所以我无法理解它的行为.Document对象具有usecapture true，而Child div将usecapture设置为false，文档usecapture紧随其后.因此，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>

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);

Javascript 无法理解 addEventListener 中的 useCapture 参数

推荐答案

Javascript相关问答推荐

使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

如何保持子画布元素的1：1宽高比？

仅圆角的甜甜圈图表

在贝塞尔曲线的直线上找不到交叉点：(使用@Pomax的bezier.js)

materialized - activeIndex返回-1

我开始使用/url？q=使用Cheerio

判断表格单元格中是否存在文本框

Ember.js 5.4更新会话存储时如何更新组件变量

Reaction Native中的范围滑块

第二次更新文本输入字段后，Reaction崩溃

查询参数中的JAVASCRIPT/REACT中的括号

同一类的所有div'；S的模式窗口

如何在 Select 文本时停止Click事件？

用于部分字符串的JavaScript数组搜索

每隔3个项目交替显示，然后每1个项目交替显示

如何在Java脚本中并行运行for或任意循环的每次迭代

谷歌饼图3D切片

固定动态、self 调整的优先级队列

当达到高度限制时，如何裁剪图像？使用html和css

当S点击按钮时，我如何才能改变它的样式？