JS事件代理|极客笔记

JS事件代理

在前端开发中，经常会遇到需要处理大量元素事件的情况，比如给每一个按钮添加点击事件，如果有大量按钮时，一一给它们绑定事件显然不是一个好的解决方案。这时，就可以利用事件代理来简化事件处理逻辑，提高性能。

什么是事件代理

事件代理，又称事件委托，是利用事件冒泡的机制，让一个父元素代替多个子元素来触发事件，通过事件的target属性来判断是哪个子元素被点击。通过这种方式，只需在父元素上绑定一个事件，就可以实现对多个子元素的事件处理。

为什么使用事件代理

性能优化：减少绑定事件的次数，降低内存消耗和页面渲染成本；
动态元素：动态添加或删除的元素也能正确触发事件，不需要重新绑定事件；
代码简洁：统一管理一类元素的事件处理逻辑，提高代码的可读性和维护性。

示例

假设有一个ul列表，每个li元素中包含一个按钮，我们希望点击按钮时能够弹出对应的索引值。传统做法需要为每个按钮单独绑定事件处理程序，但使用事件代理可以简化代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="list">
        <li><button>Button 1</button></li>
        <li><button>Button 2</button></li>
        <li><button>Button 3</button></li>
        <li><button>Button 4</button></li>
        <li><button>Button 5</button></li>
    </ul>

    <script>
        const list = document.getElementById('list');

        list.addEventListener('click', (event) => {
            if (event.target.tagName === 'BUTTON') {
                const index = Array.from(list.children).indexOf(event.target.parentNode);
                alert(`Button ${index + 1} clicked`);
            }
        });
    </script>
</body>
</html>

在上面的示例中，我们通过事件代理的方式为ul元素绑定了click事件，当点击其中的按钮时，会弹出对应的按钮索引值。通过判断event.target的tagName，我们可以获取到真正被点击的元素，从而完成相应的处理逻辑。