面试题：JavaScript中事件委托的基本原理及应用场景

Question

请阐述JavaScript中事件委托的基本原理，并举例说明至少两个适合使用事件委托的应用场景。

Answer 1

事件委托基本原理

1. 原理基础：JavaScript 中的事件具有冒泡机制，即当一个元素上的事件被触发时，该事件会从最内层的目标元素开始，逐层向上传播到外层的祖先元素。事件委托正是利用了这一特性。
2. 具体原理：将事件处理程序绑定到共同的祖先元素上，而不是绑定到每个具体的子元素。当子元素上的事件触发时，由于事件冒泡，事件会一直向上传播到绑定了处理程序的祖先元素，在祖先元素的处理程序中通过 event.target 来判断实际触发事件的目标元素，从而执行相应的逻辑。这样可以避免为大量相似元素分别绑定事件处理程序，减少内存占用和提高性能。

适合使用事件委托的应用场景

1. 列表项点击
   • 场景描述：假设有一个动态生成的无序列表，列表项很多。需要为每个列表项添加点击事件，执行不同的操作。
   • 代码示例：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    const list = document.getElementById('list');
    list.addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            console.log('You clicked on:', event.target.textContent);
        }
    });
</script>

2. 按钮组操作
   • 场景描述：页面上有一组按钮，每个按钮有不同的功能，但可以利用事件委托统一处理。
   • 代码示例：

<div id="buttonGroup">
    <button type="button">Button 1</button>
    <button type="button">Button 2</button>
    <button type="button">Button 3</button>
</div>
<script>
    const buttonGroup = document.getElementById('buttonGroup');
    buttonGroup.addEventListener('click', function(event) {
        if (event.target.tagName === 'BUTTON') {
            console.log('You clicked button:', event.target.textContent);
        }
    });
</script>