javascript 冒泡捕获

最新推荐文章于 2023-11-01 10:58:14 发布

Never Yu

最新推荐文章于 2023-11-01 10:58:14 发布

阅读量541

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 冒泡捕获

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.youkuaiyun.com/csdn_yudong/article/details/72729689

前端专栏收录该内容

186 篇文章

订阅专栏

本文详细解析了DOM事件流中的两种主要类型：捕获和冒泡。介绍了这两种事件流的区别及其实现方式，并提供了如何使用JavaScript阻止事件冒泡和捕获的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

冒泡捕获
阻止冒泡阻止捕获
- 阻止冒泡
- 阻止捕获

冒泡/捕获

DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法，并且大多数新浏览器都遵循这两种事件流方式。

js-maopao-buhuo

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

阻止冒泡/阻止捕获

阻止冒泡

如果我们不希望事件冒泡，如何阻止事件冒泡？
实际上，事件的对象哟一个 stopPropagation() 方法可以阻止事件冒泡：

document.getElementById("button").addEventListener("click", function(e){
  alert("button");
  e.stopPropagation();
},false);

这样，点击 button 后，只会弹出一个弹窗，显示 button.

注意：现代所有的浏览器都支持事件冒泡，只是在实现上有一些差别。

阻止捕获

我们如何才能阻止事件的捕获呢？使用 event.stopPropagation() 方法吗？答案是否定的，这里要知道，stopPropagation() 方法只能阻止事件的冒泡，而不能阻止事件捕获。

但是我们可以使用 DOM3 级新增事件 stopImmediatePropagation() 方法来阻止事件捕获，另外此方法还可以阻止事件冒泡：

document.getElementById("second").addEventListener("click", function(e){
  alert("second");
  e.stopImmediatePropagation();
},true);

这样，就可以在 id 为 second 处阻止事件的捕获了。
注意：尽管这是 Netscape Navigator 提出的事件流，但是现在所有的浏览器都支持这种事件流模型。但是由于老的浏览器不支持，所以很少有人使用事件捕获。