前端面试题69（js委托事件）

在JavaScript中，事件委托是一种常用的技巧，用于处理动态生成的元素或者想要用更高效的方式管理事件监听器。事件委托的基本原理是利用事件冒泡（event bubbling），即事件从最深的节点开始，逐级向上层节点传播的特性，来在父元素上监听子元素的事件。

为什么使用事件委托？

1. 性能优化：只需在父元素上绑定一次事件处理器，而不是为每个子元素单独绑定，减少了内存消耗和DOM操作。
2. 动态内容处理：即使子元素是后来动态添加到页面中的，委托的事件处理器依然能生效。
3. 代码简洁：减少了重复的事件绑定代码，使代码更加模块化和易于维护。

如何实现事件委托？

下面是一个简单的事件委托示例，假设我们有一个包含多个按钮的列表，我们想给每个按钮添加点击事件，但通过父元素ul来实现委托：

<ul id="myList">
    <li><button>Button 1</button></li>
    <li><button>Button 2</button></li>
    <li><button>Button 3</button></li>
    <!-- 更多按钮可能动态添加 -->
</ul>

document.getElementById('myList').addEventListener('click', function(event) {
    // event.target 是实际触发事件的元素
    if (event.target.tagName.toLowerCase() === 'button') {
        // 在这里处理点击事件
        console.log('Button clicked:', event.target.textContent);
        
        // 根据需要执行具体操作，比如：
        // event.target.classList.add('clicked');
    }
});

解释

• 我们在<ul>元素上绑定了一个click事件监听器。
• 当用户点击任何一个按钮时，事件首先在按钮（<button>）上触发，然后冒泡到其父元素、祖父元素等，直到被我们的事件监听器捕获。
• event.target指向实际触发事件的元素，在这个例子中就是被点击的按钮。
• 我们通过检查event.target.tagName.toLowerCase()是否等于'button'来确定点击的是不是按钮，这是事件委托的关键步骤，确保只有当点击的目标元素是我们关心的类型时才执行相应的逻辑。

通过这种方式，不论是现有的按钮还是将来动态添加的按钮，都可以通过这一个事件监听器来处理点击事件，实现了高效且灵活的事件管理。