DOM事件流
事件流
事件捕获与事件冒泡
阻止冒泡
阻止事件流动
阻止默认行为
补充
两种注册事件的区别
事件委托
解绑事件
事件流
- 事件流指的是完整执行过程中的流动路径 - 相同的事件才会有事件流 - 如图:- 举例来说: 假设页面里面有个div,当触发事件时,会触发两个阶段,分别是捕获与冒泡
- 大白话说: 捕获阶段就是 从父到子, 冒泡阶段就是从子到父
事件捕获与事件冒泡
事件冒泡概念- 当一个元素的事件被触发时,同样的事件会在该元素的所有祖先元素中依次被触发,这个过程称为事件冒泡
- 简单理解: 当一个元素触发事件后,会依次向上调用所有的父元素的同名点击事件
- 冒泡事件时默认存在的
事件捕获概念
从DOM的根元素开始执行对应的事件(从外到里)
语法:
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
注意:
- addEventListener第三个参数传入true代表是捕获阶段触发(使用较少)
- 若传入false代表冒泡阶段触发,默认的是false
阻止冒泡
因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素若想把事件就限制在当前元素内,就需要阻止事件冒泡,阻止事件冒泡需要拿到事件对象
事件对象.stopPropagation
注意:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
阻止事件流动
因为默认有冒泡模式的存在,所以需要阻止事件流动
语法:
事件对象.stopProagation()
注意:
此方法可以阻断事件流动传播,不光冒泡阶段有用,捕获阶段也有效
补充
鼠标经过事件:
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐使用)
阻止默认行为
阻止默认行为,比如链接点击不跳转,表单域的跳转
语法:
e.preventDefault()
两种注册事件的区别
- 传统on注册
- 同一个对象,后面注册的事件会覆盖前面的注册(同一事件)
- 直接使用null覆盖就可以实现事件解绑
- 都是冒泡阶段执行的
- 事件监听注册
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
- 后面注册的事件不会覆盖前面注册的事件(同一事件)
- 可以通过第三个参数去确定在冒泡或者捕获阶段
- 必须使用 removeEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
- 匿名函数无法被解绑
事件委托
事件委托就是给父级添加事件,而不是给子级添加事件
- 给父级元素添加事件(可以提高性能)
- 事件委托就是利用事件冒泡的特点 ,给父元素添加事件
- 事件对象.target可以获得真正触发事件的元素
解绑事件
方法一
on事件方式,直接使用null覆盖偶就可以实现事件的解绑
btn.οnclick= function(){
alert('点击了)
}
// 解绑事件
btn.onclick = null
方法二
addEventListener方式,必须使用:
removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
例如:
function fn(){
alert('点击了)
}
// 绑定事件
btn.addEventLIstener('click', fn)
// 解绑事件
btn.removeEventListener('click', fn)
注意:匿名函数无法被解绑