JS 事件委托|极客笔记

JS 事件委托

在日常的网页开发中，我们经常会遇到需要给页面上的多个元素添加相同的事件监听器的情况。如果直接为每个元素都绑定相同的事件处理函数，不仅会增加页面的加载时间，还会影响页面的性能。而事件委托（event delegation）则是一种更加高效的解决方案。

什么是事件委托

事件委托是利用事件冒泡的机制来减少事件处理器的数量。也就是说，我们可以将事件监听器绑定在一个父元素上，通过判断事件的目标元素来执行相应的操作。这样做可以在减少代码量的同时提高性能。

为什么使用事件委托

提高性能：减少事件监听器的数量，避免为每个元素都绑定事件处理函数造成的性能损耗。
动态元素：对于后添加的动态元素也能够有效监听，不需要重新绑定事件。
简化代码：可以通过事件冒泡的机制，将事件处理函数集中在一个父元素上管理，代码更加清晰简洁。

如何实现事件委托

在实际应用中，使用事件委托可以通过以下几种方式来实现：

1. 直接绑定事件监听器

在父元素上直接绑定事件监听器，通过事件对象的target属性判断目标元素，执行相应的操作。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托示例</title>
<style>
    .item {
        padding: 10px;
        margin: 5px;
        background-color: #f2f2f2;
        cursor: pointer;
    }
</style>
</head>
<body>

<div id="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

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

    container.addEventListener('click', function(event) {
        if (event.target.classList.contains('item')) {
            console.log('点击了 ' + event.target.innerText);
        }
    });
</script>

</body>
</html>

在这个示例中，我们为包裹所有item元素的container元素添加了click事件监听器，通过判断点击的目标元素是否为item元素来执行相应的操作。

2. 利用事件冒泡

利用事件冒泡的机制，将事件监听器绑定在父元素上，通过判断事件的target属性来执行相应的操作。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托示例</title>
<style>
    .item {
        padding: 10px;
        margin: 5px;
        background-color: #f2f2f2;
        cursor: pointer;
    }
</style>
</head>
<body>

<div id="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

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

    container.addEventListener('click', function(event) {
        if (event.target.tagName === 'DIV' && event.target.classList.contains('item')) {
            console.log('点击了 ' + event.target.innerText);
        }
    });
</script>

</body>
</html>

在这个示例中，我们利用事件冒泡的机制，通过判断点击的目标元素的tagName和classList来执行相应的操作。