前端面试-JS JavaScript事件绑定，事件捕获，事件冒泡，事件委托

**

事件绑定，事件捕获、冒泡，事件委托

**

**

1.

事件绑定**

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。
所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

1. 在DOM元素中直接绑定(注册行内事件)；
2. 在JavaScript代码中绑定；
3. 绑定事件监听函数

1.1 在DOM中直接绑定事件
我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等 DOM事件 。

1.2 在JavaScript代码中绑定事件
在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

1.3 使用事件监听绑定事件

//可以给同名的事件，绑定多个事件处理程序//语法：对象.addEventListener(参数1,参数2,参数3);
//参数1：事件名(字符串)，不要加on  例如：click  、 mouseover 、mouseout
//参数2：事件处理程序（函数名），当事件触发后哪个函数来处理
//参数3：是一个bool类型，可以不传，默认为fasle（代表冒泡）跟冒泡和捕获有关//如果是true则表示捕获阶段
//如果有同名事件不会覆盖，而是会依次执行
//IE8及以前的版本不支持

1.3.1 事件监听的好处

1. 可以绑定多个事件,常规的事件绑定只执行最后绑定的事件。
2. 可以解除相应的绑定

2.

W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。*

事件冒泡:

如果一个元素的事件被触发,那么它所有的父级元素的同名事件都会被触发.

*注意点:*只有当父级拥有同名事件的时候才会被触发.

事件捕获:

从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止.

注意点1:是去寻找与与父元素注册的同名事件的子元素
注意点2:因为事件捕获，只能通过addEventListener并且参数写true才是事件捕获
注意点3:其他情况都是冒泡（不是通过addEventListener添加、addEventListener参数为false）

**

3.

事件委托(事件代理)**

3.1 什么是事件委托
就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

3.2 为什么用事件委托
①. 优化性能: 当给10000个li注册点击事件的时候,只需要委托个它的父元素,这样js与dom元素的交互就变为一次,减少了浏览器重绘与重排的次数
②. 减少了内存 给10000个li注册点击事件,每一个li都会有一个事件函数保存在内存里,10000个相同的事件函数与一个事件函数的内存,内存节省太多.同时如果10000个li注册点击事件会造成内存溢出.
③. 可以后来新添加的动态元素绑定事件(非常重要)

3.3 事件委托原理

利用的就是前面讲的冒泡原理:
比如给li点击事件,事件先开始捕获阶段,从body->ul->li,而li是目标元素,此时处于目标阶段,浏览器就会查看是否有点击事件,发现没有,那么进入第三个阶段冒泡,又从li->ul,发现ul身上有点击事件,那么便触发ul的点击事件.

本文仅供本人学习方便！利人利己

   [本文参考](https://blog.csdn.net/weixin_42839080/article/details/81909675)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！