day22 Web APIs 4

目录

 

一、事件对象

1、获取事件对象

 2、事件对象常用属性

二、事件流

1、事件流与两个阶段说明

2、事件捕获和事件冒泡

3、阻止事件流动

 三、事件委托

---

一、事件对象

1、获取事件对象

（1）事件对象是什么

• 也是个对象，这个对象里有事件触发时的相关信息
• 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

（2）如何获取

• 在事件绑定的回调函数的第一个参数就是事件对象
• 一般命名为event、ev、e

 2、事件对象常用属性

（1）部分常用属性

type：

• 获取当前的事件类型

clientX/clientY：

• 获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY：

• 获取光标相对于当前DOM元素左上角的位置

key：

• 用户按下的键盘键的值
• 现在不提倡使用keyCode

二、事件流

1、事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径

•  说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
• 简单来说：捕获阶段是 从父到子  冒泡阶段是从子到父

2、事件捕获和事件冒泡

（1）事件冒泡概念：

•  当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
• 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件，而事件冒泡是默认存在的

（2）事件捕获概念：

• 从DOM的根元素开始去执行对应的事件 (从外到里)
• 事件捕获需要写对应代码才能看到效果

代码：

 说明：

• addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
• 若传入false代表冒泡阶段触发，默认就是false
• 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

3、阻止事件流动

        因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内，就需要阻止事件流动，阻止事件流动就需要拿到事件对象。

语法：

•  此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

鼠标经过事件：

• mouseover 和 mouseout 会有冒泡效果
• mouseenter  和 mouseleave   没有冒泡效果(推荐)

阻止默认行为，比如链接点击不跳转，表单域的不提交

语法：

 例：

 三、事件委托

       事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

例：

         利用冒泡的特性，当我们点击li 标签内容，首先会去寻找自身有没有绑定事件，然后再去寻找他的父级有没有绑定事件。当发现父级有绑定事件的时候，就会触发事件。则当我们点击任何一个li标签的内容都会变成红色的字体。效果如下所示

 总结：

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