web API-day04-事件对象,事件流,事件委托

一, 事件对象

1. 获取事件对象

  1. 事件对象是什么?

当事件触发的时候,产生的对象,该对象记录有事件相关的信息

  1. 如何获取?

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

2. 事件对象常用属性

常用属性:

pageX/pageY
获取光标相对于页面左上角的位置

key
用户按下的键盘键的值

二, 事件流

1. 事件流和两个阶段说明

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

说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段

简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父

2. 事件捕获和事件冒泡

事件冒泡概念:

当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

事件捕获概念:

从DOM的根元素开始去执行对应的事件 (从外到里)

演示事件捕获:

说明:

Ø addEventListener第三个参数传入true代表是捕获阶段触发(了解即可)

Ø 若传入false代表冒泡阶段触发,默认就是false

Ø 若是用 L0 事件监听,则只有冒泡阶段,没有捕获

3. 阻止事件流动

阻止事件流动需要通过事件对象来实现

语法:

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

  1. 鼠标经过事件:

    Ø mouseover 和 mouseout 会有冒泡效果

    Ø mouseenter 和 mouseleave 没有冒泡效果(推荐)

  2. 两种注册事件的区别

    传统on注册(L0)

    Ø同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

    Ø直接使用null覆盖就可以实现事件的解绑

    Ø都是冒泡阶段执行的

    事件监听注册(L2)

    Ø语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

    Ø后面注册的事件不会覆盖前面注册的事件(同一个事件)

    Ø可以通过第三个参数去确定是在冒泡或者捕获阶段执行

    Ø必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

    Ø匿名函数无法被解绑

4. 阻止浏览器的默认行为

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

语法:

三, 事件委托

目标:能够说出事件委托的好处

优点:给父级元素加事件(可以提高性能)

原理:事件冒泡,给父元素注册的事件,子元素是可以触发

实现:事件对象.target 可以获得真正触发事件的元素

1. 事件委托是委托给了谁?

Ø 父元素

1. 如何找到真正触发的元素?

Ø e.target 事件对象.target
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容