文章目录
- 事件流
- 事件捕获
- 事件冒泡
- 阻止冒泡
- 阻止元素默认行为
- 解绑事件
- 两种注册事件的区别
事件流
事件流指的是事件完整执行过程中的流动路径
捕获阶段:从父到子
冒泡阶段:从子到父
实际工作都是使用事件冒泡为主
事件捕获
从DOM的根元素开始执行对应的事件(从外到里)
代码:DOM.addEvent(事件类型,事件处理函数,是否使用捕获机制)
说明:addEventListener第三个参数传入true代表是捕获阶段触发(很少使用),若传入false代表冒泡阶段触发,默认就是false
事件冒泡
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次触发
即一个元素触发事件后,会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
阻止冒泡
语法:事件对象.stopPropagation()
也能阻止捕获
阻止元素默认行为
语法:e.preventDefault()
例如:
<body>
<a href="http://www.baidu.com">百度一下</a>
<script>
const a = document.querySelector('a')
a.addEventListener('click',function(e) {
e.prevntDefault()//阻止打开链接
})
</script>
</body>
解绑事件
- on事件方式,直接使用null覆盖偶就可以实现事件的解绑
语法:
btn.onclick = function() {
alert('点击')
}
btn.onclick = null
- addEventListener方式,必须使用:
removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
例如:
function fn() {
alert('点击')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)
注意:匿名函数无法被解绑
两种注册事件的区别
- 传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行 - 事件监听注册(L2)
语法:addEvent(事件类型,事件处理函数,是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑