事件捕获(event capturing): 当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源),浏览器会从根节点 =>事件源(由外到内)进行事件传播。
事件冒泡(dubbed bubbling): 事件源 =>根节点(由内到外)进行事件传播。
事件冒泡
在 冒泡
中,内部元素的事件会先被触发,然后再触发外部元素,即:
<p> 元素的点击事件先触发,然后会触发<div> 元素的点击事件。false
事件捕获
在 捕获
中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
<p>元素的点击事件先触发 ,然后再触发<div>元素的点击事件。true
无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播。
dom标准事件流的触发的先后顺序为:先捕获再冒泡。即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。
<!--
//冒泡事件解释
/*
*点击标签<p>你好</p>
* 先弹出内容 --p你好
* 再弹出内容 --div你好
*/
-->
<head>
<style>
.id {
height: 100px;
width: 100px;
background-color: aquamarine;
}
p{
height: 20px;
width: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="id" class="id" onclick="alert('div你好')">
<p onclick="alert('p你好')">你好</p>
</div>
</body>
阻止事件默认行为
如果不想这样的默认操作发生,可以使用 event.stopPropagation(); 方法来阻止
event.stopPropagation();
<head>
<style>
.id {
height: 100px;
width: 100px;
background-color: aquamarine;
}
p {
height: 20px;
width: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="id" class="id" onclick="alert('div你好'); event.stopPropagation();">
<p onclick="alert('p你好'); event.stopPropagation();">你好</p>
</div>
</body>