无法理解addEventListener中的useCapture属性 | 理解addEventListener中的useCapture属性

本文介绍了无法理解addEventListener中的useCapture属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已阅读，但无法理解 useCapture 属性。定义有：

I have read article at https://developer.mozilla.org/en/DOM/element.addEventListener but unable to understand useCapture attribute. Definition there is:

在这个代码中，父事件在孩子之前触发，所以我无法理解它的
behavior.Document对象具有用途true和child div的用法设置为false，并且文档的使用被跟随。因此，为什么文档属性优先于小孩。

In this code parent event triggers before child,so I am not able to understand itsbehavior.Document object has usecapture true and child div has usecapture set false and document usecapture is followed.So why document property is preferred over 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>

推荐答案

可以在两个场合激活事件：开始（捕获）和结束（bubble）。

事件按照它们的定义顺序执行。说，你定义4个事件监听器：

Events can be activated at two occasions: At the beginning ("capture"), and at the end ("bubble").Events are executed in the order of how they're defined. Say, you define 4 event listeners:

window.addEventListener("click", function(){alert(1)}, false);
window.addEventListener("click", function(){alert(2)}, true);
window.addEventListener("click", function(){alert(3)}, false);
window.addEventListener("click", function(){alert(4)}, true);

警报框将按以下顺序弹出：

The alert boxes will pop up in this order:

2（定义第一，使用 capture = true ）

4（定义第二个使用 capture = true ）

1（第一个定义的事件与 capture = false ）

3（第二个定义的事件与 capture = false ）

2 (defined first, using capture=true)
4 (defined second using capture=true)
1 (first defined event with capture=false)
3 (second defined event with capture=false)

这篇关于无法理解addEventListener中的useCapture属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！