面试题：JavaScript 事件驱动编程中的事件委托原理及应用场景

JavaScript 事件委托的原理

事件委托是利用事件冒泡的特性，将子元素的事件处理函数绑定到父元素上。当子元素触发事件时，事件会沿着 DOM 树向上冒泡，直到父元素，父元素通过判断事件源（event.target）来确定实际触发事件的子元素，从而执行相应的处理逻辑。这样可以减少事件绑定的数量，提高性能。

实际开发中适用事件委托的场景

列表项点击事件：在一个包含大量列表项的无序列表中，为每个列表项绑定点击事件会消耗大量资源。通过事件委托，只需在父级 <ul> 元素上绑定点击事件，根据 event.target 判断点击的是哪个列表项，然后执行相应操作。
动态添加元素的事件处理：当页面中有动态添加的元素时，例如通过 AJAX 获取新的 DOM 元素并添加到页面。如果为每个新添加的元素单独绑定事件，每次添加都需要重新绑定。使用事件委托，只需在父元素上绑定一次事件，新添加的子元素触发的事件依然可以被捕获处理。

代码展示事件委托的实现

<!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="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>

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

</html>

在上述代码中，给 <ul> 元素添加了点击事件监听器。当点击 <ul> 内的 <li> 元素时，事件冒泡到 <ul>，通过判断 event.target 是否为 <li> 元素，来执行相应的处理逻辑。

星途面试题库

面试题：JavaScript 事件驱动编程中的事件委托原理及应用场景

知识考点

面试题答案

JavaScript 事件委托的原理

实际开发中适用事件委托的场景

代码展示事件委托的实现