HTML:事件代理和事件委托的区别

事件代理和事件委托是一个东西只是叫法不同而已

了解事件代理之前首先要了解事件流机制，事件代理就是利用了事件流中的事件冒泡的特性

事件触发会经历两个阶段：捕获阶段和冒泡阶段。这两个阶段构成了事件流，决定了事件的传播和处理顺序。

事件机制的触发的是三个阶段：

捕获阶段(Capture Phase):
- 事件从最外层的祖先元素逐级向下传播到目标元素。
- 在捕获阶段，如果父元素上有addEventListener事件监听器，它会在目标元素触发之前被触发。
目标阶段(Target Phase):
- 事件到达目标元素时触发。
- 在目标阶段，触发绑定在目标元素的addEventListener事件监听器
冒泡阶段(Bubbing Phase):
- 事件从目标元素开始向上传播到最外层的组件元素。
- 在冒泡阶段，如果父元素上有addEventListener事件监听器，它会在目标元素触发之后被触发

tips：并非所有事件都支持捕获阶段。一些常见的事件（如鼠标点击事件）只支持冒泡阶段。

当一个元素执行某类型事件，从该元素开始逐层向外层元素检查是否有该类事件，有则触发，没有就继续向上查找，直到Document为止。

事件捕获则是和事件冒泡相反，当一个元素触发某类型事件时，从这个元素的根节点开始逐级向里查找，有则触发，没有就继续向里查找，直到触发该事件的元素为止。

事件冒泡是从元素本身开始，逐级向上寻找同类型事件并执行，一直到document为止。事件捕获是从document开始，逐级向下寻找同类型事件，并执行，一直到触发该事件的元素为止。

根据上面的了解，事件流的三个阶段：捕获阶段 >> 目标阶段 >> 冒泡阶段所以一次事件当执行，是走以下流程的：先进行事件捕获，再到事件本身，最后进行事件冒泡

难道每一个事件都要把冒泡和捕获都走一遍嘛？其实不是的，事件冒泡和事件捕获本身不会主动触发事件，需要我们决定在哪个阶段执行，通过使用addEventListener函数来决定事件发生的位置

javascript 复制代码

 addEventListener(eventType,function,bool)
//eventtype:事件类型
//function：事件函数
//bool：true或false

addEventListener函数有三个参数：

1，eventType 事件类型（"click之类的"）

2，function 触发事件后所需要执行的函数

3，bool 入参true/false,决定事件在冒泡阶段执行还是捕获阶段执行。 true表示事件在捕获阶段执行，false表示事件在冒泡阶段执行。默认值是false

事件代理的作用就是避免大量事件注册，提高性能，在工作中当大量子级元素需要绑定一个相同的事件时就可以把它们的事件绑定在它们的父级身上通过事件代理的方式去减少时间的注册

优点：

1，可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件

2，可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

局限性：

1，focus 、 blur 这些事件没有事件冒泡机制，所以⽆法进⾏委托绑定事件

2，mousemove 、 mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗⾼，因此也是不适合于事件委托的