JS事件三个阶段
程序员文章站
2024-01-20 21:05:34
...
事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；
1.捕获阶段
当我们为某个元素绑定事件时，事件触发前会经历事件捕获阶段
如图
我们给某个div注册点击事件的时候，会经历事件捕获阶段，事件从最外层捕获一直找到当前绑定事件的元素这里称为事件目标阶段，然后触发click事件（）。
2.目标阶段
当事件从最外层不断传递到目标节点的时候，最后在目标节点触发事件。
3.事件冒泡
当事件触发的时候，会一层一层的往外冒至最外层元素，这里恰好与事件捕获相反
我们来看一个例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#one {
width:300px;
height:200px;
background: red
}
#two {
width:250px;
height:150px;
background: blue
}
#three{
width:200px;
height:100px;
background: orange
}
</style>
</head>
<body>
<div id='one'>one
<div id='two'>two
<div id='three'>three</div>
</div>
</div>
</body>
<script type="text/javascript">
var three = document.getElementById('three');
one.onclick=function(){
console.log('one')
}
two.onclick=function(){
console.log('two')
}
three.onclick=function(){
console.log('three')
}
</script>
</html>
我们给3个div分别注册了点击事件，当我们点击最里面的div时。
输出了三次，这是因为事件冒泡的原因，当最里面的div被点击时事件会一层一层的往外冒
由于三个div绑定了同一种事件所以每个元素都执行了一次。
需要注意的是我们普通注册的事件都是在事件冒泡阶段执行的
如onclick ,mouseover.等等
但mouseenter和mouseleave不会触发事件冒泡
有时候我们不希望事件在冒泡阶段执行，怎么办？
1.通过事件对象提供的stopPropagation()方法
three.onclick=function(e){
console.log('three');
e.stopPropagation();//停止
}
2.通过addEventListener注册的事件可以修改第三个参数决定事件是在捕获或冒泡阶段执行
true事件捕获
false事件冒泡
清除元素默认行为 e.preventDefault()
上一篇： py中的目录与文件判别代码
下一篇： 2019天猫618购物津贴怎么使用?