js中的事件捕获和事件捕获_js 点击按钮未捕捉到事件,按钮的父级捕捉了事件-优快云博客

本文链接：https://blog.youkuaiyun.com/csm0912/article/details/82595702

本文探讨了事件流中捕获与冒泡阶段的绑定顺序如何影响执行顺序。通过实例展示了不同绑定顺序对事件触发的影响。

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

事件流的三个阶段：

事件捕获阶段
目标阶段
事件冒泡事件

关于这三个阶段的介绍网上已经有很多介绍了，在这里不做介绍。本文主要说下需要注意的一点：当在事发元素上即绑定了捕获事件又绑定了冒泡事件时，事发元素上的执行顺序由事件注册顺序决定。
如：

var p = document.getElementById("parent");
var s = document.getElementById("son");
p.addEventListener("click", function(e){
	console.log("父元素捕获");
}, true);
p.addEventListener("click", function(e){
	console.log("父元素冒泡");
}, false);
s.addEventListener("click", function(e){
	console.log("子元素捕获");
}, true);
s.addEventListener("click", function(e){
	console.log("子元素冒泡");
}, false);

执行结果为：
父元素捕获
子元素捕获
子元素冒泡
父元素冒泡
但是，当改变事件绑定事件时，即

p.addEventListener("click", function(e){
	console.log("父元素捕获");
}, true);
p.addEventListener("click", function(e){
	console.log("父元素冒泡");
}, false);
s.addEventListener("click", function(e){
	console.log("子元素冒泡");
}, false);
s.addEventListener("click", function(e){
	console.log("子元素捕获");
}, true);

执行结果为：
父元素捕获
子元素冒泡
子元素捕获
父元素冒泡