个人中心
gpt4 book ai didi

javascript - 在 JavaScript 事件处理 DOM Level 2 中，为什么目标首先获得 "bubbling"，然后是 "capturing"？

转载 作者：行者123 更新时间：2023-11-29 19:16:29 24 4
gpt4 key购买 nike

据我了解，DOM Level 2 事件处理按以下顺序工作:

  1. 从顶部 HTML 元素一直捕获到目标之前
  2. 目标本身
  3. 一直冒泡回到顶部 HTML 元素

示例位于:https://jsfiddle.net/uwe5dmxw/
(我将在这个问题的末尾包含代码)

但如果我在当前的 Google Chrome、Firefox、Safari 甚至 IE 11 上单击“子”元素(最低级别的后代)，我将按以下顺序获得一致的结果:

  1. HTML 捕获
  2. body 捕捉
  3. parent 捕捉
  4. 目标冒泡
  5. 目标捕获
  6. 父冒泡
  7. body 冒泡
  8. HTML 冒泡

即“目标捕获”和“目标冒泡”的顺序颠倒了。

据我了解，虽然 DOM Level 2 说事件只到达目标一次，但大多数浏览器将其实现为两次到达，一次在事件捕获期间，一次在事件冒泡期间。但事实是，为什么“目标捕获”和“目标冒泡”是相反的呢？

代码:(不过只是个demo，非必要不用看)

<div id="hi">
  hello
  <div id="child">
    child
  </div>
</div>

JavaScript:

var parentElement = document.getElementById("hi"),
  childElement = document.getElementById("child"),
  htmlElement = document.getElementsByTagName("html")[0],
  bodyElement = document.getElementsByTagName("body")[0];

// ------------------ Bubble --------------------

htmlElement.addEventListener("click", function() {
  console.log("<html> clicked " + new Date().getTime(), this);
});

bodyElement.addEventListener("click", function() {
  console.log("<body> clicked " + new Date().getTime(), this);
});

parentElement.addEventListener("click", function() {
  console.log("Parent clicked " + new Date().getTime(), this);
});

childElement.addEventListener("click", function() {
  console.log("Child clicked at " + new Date().getTime(), this);
});

// ------------------ Use Capture --------------------

htmlElement.addEventListener("click", function() {
  console.log("<html> (useCapture) clicked " + new Date().getTime(), this);
}, true);

bodyElement.addEventListener("click", function() {
  console.log("<body> (useCapture) clicked " + new Date().getTime(), this);
}, true);

parentElement.addEventListener("click", function() {
  console.log("Parent (useCapture) clicked " + new Date().getTime(), this);
}, true);

childElement.addEventListener("click", function() {
  console.log("Child (useCapture) clicked at " + new Date().getTime(), this);
}, true);

最佳答案

当事件发生在具有多个事件处理程序的对象上时，事件处理程序将按照它们附加的顺序被触发。您没有在 child 上看到单独的事件。您会看到发送到两个事件处理程序的同一事件(点击事件)，但按照事件处理程序附加的顺序发送。

如果您颠倒事件处理程序的分配顺序，您将看到事件处理程序也更改了它们的调用顺序。该事件“到达目标”，而不是冒泡或捕获，因此两者都被调用。

如果您为两个目标事件处理程序中的每一个记录 e.eventPhase，您将看到它记录了 2 的值，这意味着它“在目标"(不冒泡或捕获)。查看doc on MDN有关 e.eventPhase 的更多信息。

关于javascript - 在 JavaScript 事件处理 DOM Level 2 中，为什么目标首先获得 "bubbling"，然后是 "capturing"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34960323/

24 4 0
文章推荐： php - 对 MySQL 结果进行编号
文章推荐： android - 通过 React native 应用程序打开和发送消息
文章推荐： mysql - Hibernate/mysql - 批量更新返回意外的行数和 ascii 字符
文章推荐： android - 用户通知需要上下文
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com