JS事件委托（event delegation）

JS事件委托（event delegation）

---

1. 什么是事件委托？

事件委托又叫事件代理，字面意思其实很明朗，但是是谁委托谁呢？为什么要这么做呢？下面一一道来。

---

2.事件委托的目的

dom中需要有事件处理程序，如果按照惯例直接给它设置事件处理程序的话，在事件比较多的时候，比如100个li ，或者for循环也行。由于添加到页面上的事件处理程序数量将直接关系到页面整体运行的性能。不断与dom节点交互。访问dom次数越多。引起的浏览器重绘和重排次数也越多。会延长整个页面交互就绪事件。

通俗来讲： 取快递：几个人同时要取，那么有两种方案：1：这几个人都在门口等着。（领导估计不大高兴）。2：委托前台MM代签。

前台MM收快递后，需要判断收件人是谁，按收件人要求签收，甚至代为付款。（新员工也可被代收（即新加节点））

每个函数都是对象，是对象就会占用内存，对象越多，内存的利用率就会越大，自然性能就越差。

---

3.事件委托的原理：

为避免为特定的每个节点添加事件监听器，就把事件监听器被加载父元素上（统一集中管理）。

利用冒泡机制实现。  div>ul>li>a 点击a 会触发到最外层的div上。委托父级代为执行。

---

总结： 为减少dom操作，利用冒泡机制而引入事件委托以增加网页性能和改善用户体验。