WebAPI_DAY4_事件对象

事件对象（e）#

常用属性#

type：当前事件类型

clientX/clientY：光标相对于左上角的位置

offsetX/offsetY：光标相对于当前DOM元素左上角位置

key：用户按下的键盘键的值

---

事件流#

事件捕获->事件冒泡：逐级向下寻找，再逐级向上冒泡触发

---

阻止事件流动#

因为默认冒泡模式，所以很容易导致事件影响到父级元素

如果想把事件限制在当前元素内，就需要阻止事件流动

事件对象.stopPropagation()

鼠标经过事件#

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果（推荐）

阻止默认行为#

比如链接点击不跳转

e.preventDefault()

---

两种注册事件的区别#

传统on注册（L0）#

• 同一个对象,后面注册的事件会覆盖前面注册(同-一个事件)
• 直接使用null覆盖偶就可以实现事件的解绑
• 都是冒泡阶段执行的

事件监听注册(L2)#

• 语法: addEventListener(事件类型,事件处理函数,是否使用捕获)
• 后面注册的事件不会覆盖前面注册的事件(同一个事件)
• 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
• 必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
• 匿名函数无法被解绑

---

事件委托#

将子元素的事件统一委托给父元素，而不是子元素各自创建事件

• 优点:给父级元素加事件(可以提高性能)
• 原理:事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
• 实现:事件对象.target可以获得真正触发事件的元素