在javascript中什么是事件委托 原理是什么

在javascript中什么是事件委托 原理是什么~

比方说a元素里面包含了b元素（或者说a元素是b元素的父元素），当b元素触发事件时，会同时把事件冒泡给a元素，也就是说a元素也会触发事件。利用这个原理，b元素就可以不对事件做任何处理，而是委托给a元素去处理，这样，当a元素中动态添加了多个与b元素同级的元素（也就是a新添加了几个儿子）或者是b元素的子元素（也就是a的孙子），这些新添加的元素都不用再绑定事件处理函数了，通通由a元素去处理即可（a元素通过target对象就可以知道事件委托方是哪个元素，从而进行不同的处理），这样就简化了程序，也避免了相互之间发生冲突的可能性。这就是事件委托。

什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思）
高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
两层意思：
1.现在委托前台的同事是可以签收的，即程序中的现有的dom节点是有事件的；
2.新员工也是可以被前台mm代为签收的，即程序中新添加的dom节点也是有事件的；

要了解委托的原理，首先要理解DOM事件的过程。

Dom事件分为两个阶段，如图：

1. 事件捕获阶段（红色箭头顺序）

2. 事件冒泡阶段（绿色箭头顺序）

   
   

在事件捕获阶段，事件源依次从defaultView（可以理解为整个页面）一直传播到具体的目标（target）。从广泛到具体。

在事件冒泡阶段，事件源依次从target传播到defaultview。从具体到广泛，范围越来越大，像冒泡过程一样，气泡越来越大（范围越来越大）

而事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。好比送信员，如果每次都把信件送给每一户，非常繁琐。但是如果交给一个大范围的管理者，比如小区的传达室，那么事情会变得非常简单。事件委托就类似这种原理，我页面中有很多按钮，如果不使用事件委托，我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div（假设所有的按钮都在这个div中），那么我只要注册一次事件，就可以处理所有按钮（只要按钮包含在上述div中）事件的响应了。

---

在javascript中什么是事件委托 原理是什么视频