DOM事件流,捕获与冒泡

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)

注意：匿名函数无法被解绑