版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/s8460049/article/details/79638531
机制
IE10以下没有捕获阶段
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件机制</title>
</head>
<body >
<div id="parent" style="height: 400px;width: 400px;background-color: cadetblue">
<div id="child" style="height: 200px;width: 200px; margin:0 auto; background-color: bisque" onclick="console.log('捕获之前 child self click')">
</div>
</div>
<script>
document.body.addEventListener("click",function () {
console.log('捕获 body click')
},true);
document.getElementById('parent').addEventListener("click",function () {
console.log('捕获 parent click')
},true);
document.getElementById('child').addEventListener("click",function () {
console.log('捕获 child click')
},true);
document.getElementById('parent').onclick =function(){
console.log('捕获之后 parent self click')
}
document.body.addEventListener("click",function () {
console.log('冒泡 body click')
},false);
document.getElementById('parent').addEventListener("click",function () {
console.log('冒泡 parent click')
},false);
document.getElementById('child').addEventListener("click",function () {
console.log('冒泡 child click')
},false);
document.body.onclick =function(){
console.log('冒泡之后 body self click')
}
</script>
</body>
</html>
点击child的打印效果
解释效果
事件捕获是由外而内的,目标事件是在自身触发的(目标事件过程,与事件声绑定顺序有关,先绑定先发生,它不遵守先捕获后冒泡),事件冒泡是由内而外的。
关键点
- child,当事件从上至下捕获的时候,到了child节点的时候,从开篇的图中,应该是先执行捕获,在执行目标,但是这里是先执行了目标,在执行了捕获,因为目标过程只与绑定的先后顺序有关,先绑定先执行。
- parent,当事件从下至上开始冒泡的时候,parent的目标在冒泡绑定之前,所以先执行。
- body,同理自然
总结
事件执行顺序是从上至下,先执行捕获事件,当执行到目标节点的时候,目标过程与绑定顺序有关,继而从下至上开始执行冒泡事件。