JavaScript事件冒泡和事件捕获
程序员文章站
2022-05-06 09:11:13
...
事件冒泡： 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上)
事件捕获：结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获向子元素(自顶向下)
及结构上嵌套，即写代码时候的嵌套，而不是说网页上的视觉效果所呈现的嵌套，下面这个案例希望能够帮助大家理解。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper{
width: 300px;
height: 300px;
background-color:red;
}
.content{
margin-left: 300px;
width: 200px;
height: 200px;
background-color:green;
}
.box{
margin-left: 200px;
width: 100px;
height: 100px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
//事件冒泡: 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上)
wrapper.addEventListener('click',function(){
console.log("wrapper")
},false);
content.addEventListener('click',function(){
console.log("content")
},false);
box.addEventListener('click',function(){
console.log("box")
},false);
</script>
</body>
</html>
事件冒泡详解：
代码复制在自己的HTML文档中，运行后我们可以看到这样的结果：打开控制台，当我们点击黄色方框的时候，红色和绿色方框所绑定的事件也会被触发，而且触发顺序是我们点击的元素开始，逐步向其父元素进行，这就是事件冒泡：
事件捕获详解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper{
width: 300px;
height: 300px;
background-color:red;
}
.content{
margin-left: 300px;
width: 200px;
height: 200px;
background-color:green;
}
.box{
margin-left: 200px;
width: 100px;
height: 100px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
//事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获向子元素(自顶向下)
wrapper.addEventListener('click',function(){
console.log("wrapper")
},true);
content.addEventListener('click',function(){
console.log("content")
},true);
box.addEventListener('click',function(){
console.log("box")
},true);
</script>
</body>
</html>
同样是点击黄色方框，可以看到，最先被触发的是最外层父元素所绑定的事件处理函数，即事件捕获是从最外层父元素开始，捕捉到事件，执行函数，然后其子元素捕捉，最后我们所点击的方框开始执行这个事件（注意这里是执行事件不是捕捉），这就叫事件捕捉，和事件冒泡刚好相反。
如果一个元素的同一个事件类型同事绑定了两个事件处理函数，并且分别触发事件冒泡和事件捕捉，则先捕获后冒泡：
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
//事件冒泡: 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上)
wrapper.addEventListener('click',function(){
console.log("wrapper")
},false);
content.addEventListener('click',function(){
console.log("content")
},false);
box.addEventListener('click',function(){
console.log("box")
},false);
//事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获向子元素(自顶向下)
wrapper.addEventListener('click',function(){
console.log("wrappercapture")
},true);
content.addEventListener('click',function(){
console.log("contentcapture")
},true);
box.addEventListener('click',function(){
console.log("boxcapture")
},true);
//同一个元素的同一个事件类型，同时绑定了两个事件处理函数，一个为事件冒泡，一个为事件捕获:先捕获 后冒泡
</script>
运行结果：
注：可以看到捕获在冒泡之前被触发，box在boxcapture之前被触发是因为代码的先后顺序，这两个事件的触发不属于冒泡也不属于捕获，上边我做了标记，他们两个是被执行。
以下事件不会触发事件冒泡：focus，blur，change，submit，reset，select；
上一篇： 一个例子弄懂事件冒泡和事件捕获