时间戳

首页 > 解决方案 > 事件如何冒泡到文档而不是 document.body？

javascript - 事件如何冒泡到文档而不是 document.body？

问题描述

最近我遇到了一些与事件冒泡相关的有趣行为。我创建了一个代码笔来说明这一点：https ://codepen.io/anon/pen/XGmxXr

我所做的只是绑定两个事件监听器（或者我猜三个，包括删除按钮的那个）。一个在文档上，一个在 document.body 上。

单击按钮时，只会显示文档中的 console.log。

为什么？事件不会先到 document.body 然后再到文档吗？

或者换一种方式问：一个事件怎么会冒泡到文档而不是文档主体？

$(document).on("click", "button", () => console.log("document knows"));

$(document.body).on("click", "button", () =>
  console.log("document body knows")
);

$("button").on("click", e => $("button").remove());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>

标签： javascriptjquery

解决方案

这已经是一个与 jQuery 事件相关的问题。使用普通的 DOM APIdocument并document.body得到正确的通知：

document.addEventListener("click", (e) => {
    if (e.target.tagName === 'BUTTON') {
      console.log("document knows");
    };
});

document.body.addEventListener("click", (e) => {
    if (e.target.tagName === 'BUTTON') {
      console.log("document.body knows");
    };
});

document.querySelector("button").addEventListener("click", function(e) {
  this.parentElement.removeChild(this);
})
<button type="button">Click me</button>

推荐阅读