面试题：JavaScript事件冒泡与捕获中的事件委托

JavaScript代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托示例</title>
</head>

<body>
    <ul id="parentList">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <!-- 这里可以有大量子元素 -->
    </ul>

    <script>
        const parentList = document.getElementById('parentList');
        parentList.addEventListener('click', function (event) {
            if (event.target.tagName === 'LI') {
                console.log('你点击了: ', event.target.textContent);
            }
        });
    </script>
</body>

</html>

为什么事件委托在这种场景下是一个好的选择

性能优化：当有大量子元素时，如果为每个子元素都绑定一个事件处理函数，会占用大量内存。而事件委托只需要在父元素上绑定一个事件处理函数，利用事件冒泡机制，所有子元素的事件都会冒泡到父元素上，由父元素的同一个事件处理函数处理，从而减少内存开销。
动态元素支持：如果动态添加新的子元素到列表中，不需要为新添加的子元素单独绑定事件处理函数。因为父元素的事件处理函数已经存在，新子元素触发的事件同样会冒泡到父元素，进而被处理。

可能存在的局限性

事件类型限制：并非所有事件都支持冒泡，例如 blur、focus 等事件不冒泡，所以不能使用事件委托处理这类事件。
逻辑复杂性增加：在处理事件时，需要在父元素的事件处理函数中根据 event.target 判断具体是哪个子元素触发了事件，这可能使代码逻辑变得复杂，特别是当子元素结构复杂，且需要处理多种不同类型子元素的事件时。
影响性能的特殊情况：虽然通常情况下事件委托能提高性能，但如果事件处理函数非常复杂，在父元素上处理所有子元素的事件可能会因为频繁处理事件而影响性能。

星途面试题库

面试题：JavaScript事件冒泡与捕获中的事件委托

知识考点

面试题答案

JavaScript代码示例

为什么事件委托在这种场景下是一个好的选择

可能存在的局限性