js原理：事件委托

一、场景

假如有一个列表ul，里面有一大堆 li，我们需要给 所有的 li 都加上 某某事件。如果我们对每个 li 进行事件的绑定，假如有1000个li，那么我们要绑定1000个事件。
假如有一个动态加载dom元素到html内，你要给动态加载的这些元素绑定事件。

二、事件委托登场

此时，就是 事件委托 登场了：我们可以把所有 li 的事件都委托给它的 父级 ul ，我们给 ul 绑定事件，这样就只要绑定一个事件。所有 li 的点击事件就会冒泡到 ul 上，从而执行到绑定的事件。

三、需要预备的知识

1、事件冒泡
子元素（li）的事件需要传递给父元素（ul），就涉及：事件冒泡 原理，这个得懂；事件冒泡本文不讲，这里只提一下比较少遇到的 事件源 的主意事项：

事件源有兼容性问题，在IE下获取事件源使用：事件对象.srcElement
标准浏览器下获取事件源使用：事件对象.target

2、事件源
父元素（ul）又要能在事件内针对各个子元素（li）进行操作，就涉及：event对象的事件源，即 不管在哪个事件中，只要你操作的那个元素就是事件源（触发该事件的对象）。

四、示例

举例1：鼠标移入每个 li 会触发一个鼠标移入事件，该事件会冒泡到 ul 上，ul 上绑定的事件里，通过事件源，就都能获取到各 li 的 innerHTML，每个li的事件是委托绑定到了 ul 上的：

既然都拿到了每个li，那么就可以搞很多事了：），
比如，还可以弹出标签名（不含括号），使用 nodeName，alert( target.nodeName ); 等等可以做很多事。

举例2：事件委托有一个很充分应用，是在 React 16 或更早版本中对事件绑定使用了委托。React 并不会将事件附加到 DOM 节点上。相反，React 会直接在 document 节点上为每种事件类型附加一个处理器，实现事件委托，这样使得在大型应用程序上具有性能优势。但在 React 17 中，React 不再向 document 附加事件处理器，而将事件处理器附加到渲染 React 树的根 DOM 容器中了。

（完）