一, 事件对象
1. 获取事件对象
- 事件对象是什么?
当事件触发的时候,产生的对象,该对象记录有事件相关的信息
- 如何获取?
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
2. 事件对象常用属性
常用属性:
pageX/pageY
获取光标相对于页面左上角的位置
key
用户按下的键盘键的值
二, 事件流
1. 事件流和两个阶段说明
事件流指的是事件完整执行过程中的流动路径
说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段
简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父
2. 事件捕获和事件冒泡
事件冒泡概念:
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
事件捕获概念:
从DOM的根元素开始去执行对应的事件 (从外到里)
演示事件捕获:
说明:
Ø addEventListener第三个参数传入true代表是捕获阶段触发(了解即可)
Ø 若传入false代表冒泡阶段触发,默认就是false
Ø 若是用 L0 事件监听,则只有冒泡阶段,没有捕获
3. 阻止事件流动
阻止事件流动需要通过事件对象来实现
语法:
此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
-
鼠标经过事件:
Ø mouseover 和 mouseout 会有冒泡效果
Ø mouseenter 和 mouseleave 没有冒泡效果(推荐)
-
两种注册事件的区别
传统on注册(L0)
Ø同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
Ø直接使用null覆盖就可以实现事件的解绑
Ø都是冒泡阶段执行的
事件监听注册(L2)
Ø语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
Ø后面注册的事件不会覆盖前面注册的事件(同一个事件)
Ø可以通过第三个参数去确定是在冒泡或者捕获阶段执行
Ø必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
Ø匿名函数无法被解绑
4. 阻止浏览器的默认行为
阻止默认行为,比如链接点击不跳转,表单域的不提交
语法:
三, 事件委托
目标:能够说出事件委托的好处
优点:给父级元素加事件(可以提高性能)
原理:事件冒泡,给父元素注册的事件,子元素是可以触发
实现:事件对象.target 可以获得真正触发事件的元素
1. 事件委托是委托给了谁?
Ø 父元素
1. 如何找到真正触发的元素?
Ø e.target 事件对象.target