1.1 事件流和两个阶段说明
• 简述:事件流顾名思义可以理解为事件的流动路径,过程如下图所示
• 事件流的两个阶段,一个是捕获阶段,另一个是冒泡阶段,简单来说事件捕获就是从父到子,而冒泡阶段则是从子到父.
1.2 事件捕获
• 概念:从DOM的根元素开始去执行对应的事件 (从外到里)
• 说明: · addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
· 若传入false代表冒泡阶段触发,默认就是false
· 若是用 L0 事件监听,则只有冒泡阶段,
1.3 事件冒泡
• 事件冒泡概念: 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒 泡
• 简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的 同名事件
• 事件冒泡是默认存在的
• L2事件监听第三个参数是 false,或者默认都是冒泡
1.4 阻止冒泡
• 问题:因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素
• 需求:若想把事件就限制在当前元素内,就需要阻止事件冒泡 l 前提:阻止事件冒泡需要拿到事件对象
• 语法:
• 注意:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
1.5 解绑事件
两种注册事件的区别
• 传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
• 事件监听注册(L2)
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解