前端 JavaScript 进阶面试题, 什么是 JavaScript 的事件代理?

Step 1

Q:: 什么是 JavaScript 的事件代理？

A:: 事件代理（Event Delegation）是一种利用事件冒泡机制来简化事件处理的方法。它的核心思想是将多个子元素的事件处理器委托给一个共同的父元素，这样可以减少内存消耗，提高性能，并且使得动态添加的元素也能响应事件。具体实现是通过在父元素上绑定事件监听器，利用事件对象的 target 属性来判断事件发生的具体子元素。

Step 2

Q:: 事件代理有哪些优点？

A:: 1. 减少内存消耗：只需要在父元素上绑定一个事件处理器，而不是每个子元素都绑定。2. 简化代码：代码更简洁，易于维护。3. 动态元素支持：新添加的子元素无需重新绑定事件处理器，因为父元素的事件处理器会自动处理。

Step 3

Q:: 事件代理有哪些缺点？

A:: 1. 事件冒泡限制：某些不冒泡的事件（如 focus、blur）不能使用事件代理。2. 事件精确度：需要额外的代码来准确判断具体的目标元素。

Step 4

Q:: 如何实现事件代理？

A:: 通过在父元素上绑定事件监听器，并在事件处理函数中使用 event.target 来确定具体的目标元素。例如：document.getElementById('parent').addEventListener('click', function(event) { if(event.target && event.target.matches('child-selector')) { // 处理事件 } });