**
事件绑定，事件捕获、冒泡，事件委托
**
**
1.
事件绑定**
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。
所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中，有三种常用的绑定事件的方法：
在DOM元素中直接绑定(注册行内事件)；在JavaScript代码中绑定；绑定事件监听函数
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 事件监听的好处
可以绑定多个事件,常规的事件绑定只执行最后绑定的事件。可以解除相应的绑定
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的点击事件.
本文仅供本人学习方便！利人利己
[本文参考](/weixin_42839080/article/details/81909675)
