目录
事件流
事件流和两个阶段说明
事件流指的是事件完整执行过程中的流动路径
说明:假设页面中有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段
简单来说:捕获阶段是“从父到子”,冒泡阶段是“从子到父”
事件捕获
概念:从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应的代码才能看到效果
语法:对象.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
addEventListener第三个参数传入true代表是捕获阶段触发
若传入false代表冒泡阶段触发,默认就是false
若使用L0事件监听,则只有冒泡阶段,没有捕获
事件冒泡
概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,这个过程称为事件冒泡
简单来说就是当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是false,或者默认都是冒泡
阻止冒泡
因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素,若想把事件就限制在当前元素内,就需要阻止事件冒泡
阻止事件冒泡前提就需要拿到事件对象
语法:事件对象.stopPropagation()
此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
解绑事件
on事件,直接使用null覆盖就可以实现事件的解绑
例如:事件对象.onlick = function(){
alert(‘点击了’)
}
事件对象.onclick = null 解绑事件
addEventListener方式,必须使用removeEvent Listener(事件类型,事件处理函数,是否使用捕获机制)
匿名函数无法被解绑
两种注册事件的区别
传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册的同一事件
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段执行的
事件监听注册(L2)
语法:对象.addEvent Listener(事件类型,事件处理函数,是否使用捕获机制)
后面注册的事件不会覆盖前面注册的同一事件
可以通过第三个参数去确定是在冒泡阶段或者捕获阶段执行
解绑事件必须使用对象.removeEvent Listener(事件类型,事件处理函数,是否使用捕获机制)
匿名函数无法被解绑
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点:减少注册次数,可以提高程序性能
原理:事件委托其实是利用事件冒泡的特点
给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
语法:事件对象.target.tagName可以获得真正触发事件的元素