如何详细实现JavaScript中通过事件委托批量添加事件监听？

本文共计706个文字，预计阅读时间需要3分钟。

1. 事件委托+事件委托：利用事件冒泡特性，将子元素的事件注册在父元素上，点击子元素时，若自身无对应事件，则向上层父元素查找。

1.什么是事件委托

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：

• 减少DOM操作，提高性能。
• 随时可以添加子元素，添加的子元素会自动有相应的处理事件。

2.事件委托的原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

3.事件委托的实现

通过一个案例来实现事件委托。
案例：批量添加事件监听。使用JavaScript实现：点击哪个li，哪个li元素的背景变红。