JavaScript高级事件冒泡

Question

我的大部分工作都是使用jQuery，但为了即将到来的项目（要求-无需使用jQuery或其他库-超出我的控制范围，请不要建议“使用jQuery”），我正在回归“老派”的JavaScript。我的范围仅限于最新的浏览器，包括iOS Safari，无需向后兼容。我正在研究事件处理程序，并且我有一个可能很疯狂但我找不到任何相关信息的想法-可能是因为它很疯狂。

1. 我试图避免直接将事件绑定到元素上，因为我将经常使用AJAX调用替换内容。
2. 我的当前思路是将监听器绑定到文档上。这似乎是标准做法。

但是，我能否跳过所有事件冒泡呢？我是否可以告诉浏览器忘记它所知道的关于事件冒泡的一切，直接跳转到文档？我意识到如果这样做，我将无法处理分配给父元素的事件，但考虑到项目范围，我可以接受这一点，特别是如果它可以提高浏览器的效率。

- Randy Hall

---

我可以将某种“捕获所有”函数绑定到每个单独的元素并停止传播，然后将事件信息发送到文档，但这样做就失去了目的。 - Randy Hall

为什么要费心呢？这不会降低性能... - Shmiddty

@Shmiddty：我以为你的评论是对“我可以将某种“catchall”函数绑定到每个单独的元素并停止传播”的回应。至于跳过冒泡阶段，可能只会有轻微的性能差异（事件对象不需要在DOM中向目标元素传递），但由于负责该操作的代码是用C（++）编写的，它可能会胜过您在JS中执行的任何绕过操作。如果这就是你的意思，那么是的，我认为没有人能反驳 :) - Elias Van Ootegem

@EliasVanOotegem 不，我是在回应楼主。:P - Shmiddty

我觉得我应该再次在这里回复： @EliasVanOotegem通过他分享的文章激励了我。我正在侦听事件，当它们进入捕获阶段时，在文档上停止传播，并访问事件目标以获取触发元素。虽然是一项小优化，但许多小优化加起来会变成一项大优化。非常感谢！ - Randy Hall

Answer 1

跳过冒泡阶段并不是一个选项。但是，如果你只想支持现代浏览器，你可以在顶层(document)捕获事件，并调用stopPropagation方法。
这样，事件永远不会传递到目标/源元素，并且永远不会到达冒泡阶段:

document.body.addEventListener('click',function(e)
{
    e.stopPropagation();
    //handle event
},true);//<-- true for capturing

关于捕获事件的更多信息，如往常一样，可在quirksmode网站上找到（链接）

- Elias Van Ootegem

---

讲解得非常清楚，感谢提供链接。我之前并没有意识到在现代浏览器实现中，事件处理程序是在“冒泡”之前被“捕获”的。 - Randy Hall

@RandyHall：非常乐意帮忙。我考虑过将您可以在链接页面标题为“W3C模型”的ASCII图表粘贴到那个链接上，以使其更清晰，但我认为最好给您整个页面。只有一件事：处理程序没有被捕获，而是事件本身。在捕获阶段，DOM和所有元素都处于它们在事件触发之前的状态中，“处理程序”是允许您在实际执行之前操作该事件的函数... - Elias Van Ootegem

Answer 2

可以跳过所有事件冒泡吗？

不行。浏览器没有提供这样的方法。

- Quentin