解锁前端黑魔法：JS事件委托全解析

LL_Hugo
118 阅读17分钟

一、开篇引入

在生活里，委托他人办事的场景屡见不鲜。比如，你出差在外，却有快递即将送达，这时你就可以委托邻居帮忙代收 ；又或者你工作繁忙，没时间去办理证件，便能委托家人代劳。这种委托他人处理事务的方式，不仅能节省自己的时间和精力，还能确保事情顺利完成。

在前端开发的世界里，也存在着类似的 “委托” 概念，那就是事件委托。你是否想过，当页面上有大量相似元素，每个元素都需要绑定点击事件时，该如何高效处理呢？又或者当页面元素动态变化，新添加的元素也需要绑定相同事件时，怎样做才能避免繁琐的重复操作？事件委托就能巧妙地解决这些问题。接下来，就让我们一同深入探索前端 JS 事件委托的奥秘。

二、事件委托是什么

事件委托，简单来说，就是把原本需要绑定在子元素上的事件，委托给它们的祖先元素来处理 。在 DOM（文档对象模型）中，当一个事件发生在某个元素上时，该事件会按照特定的顺序在 DOM 树中传播，这就是事件流。事件流分为捕获阶段和冒泡阶段。而事件委托正是利用了事件冒泡的特性。

事件冒泡是指，当一个事件在子元素上触发时，该事件会从子元素开始，一层一层向上传播，依次经过父元素、祖父元素，直到 DOM 树的根元素。例如，在一个包含多个列表项的无序列表中，每个列表项是一个子元素，无序列表是它们的父元素。当点击某个列表项时，点击事件会首先在该列表项上触发，然后向上冒泡到无序列表，再继续向上传播。

借助事件冒泡的机制，我们可以把多个子元素共有的事件处理函数，绑定到它们的父元素上。这样，当子元素触发该事件时，由于事件冒泡，父元素上的事件处理函数就会被调用。通过判断事件对象的target属性，我们能够知道具体是哪个子元素触发了事件，从而执行相应的操作 。

在前端开发里，事件委托是一种极为实用的技术。它能显著减少事件处理程序的数量，降低内存消耗，提升页面性能。尤其是在处理大量相似元素的事件，或者需要为动态添加的元素绑定事件时，事件委托的优势就更加明显了。

三、事件流与事件委托原理

（一）事件流的三个阶段

在 JavaScript 中，事件流描述了从页面中接收事件的顺序，它包括三个阶段：捕获阶段、目标阶段和冒泡阶段 。下面通过代码示例来详细了解这三个阶段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="parent">
        <div id="child">Click Me</div>
    </div>
    <script>
        // 事件捕获阶段
        document.getElementById("parent").addEventListener("click", function () {
            console.log("parent capturing");
        }, true);
        document.getElementById("child").addEventListener("click", function () {
            console.log("child capturing");
        }, true);
        // 目标阶段
        document.getElementById("parent").addEventListener("click", function () {
            console.log("parent target");
        }, false);
        document.getElementById("child").addEventListener("click", function () {
            console.log("child target");
        }, false);
        // 事件冒泡阶段
        document.getElementById("parent").addEventListener("click", function () {
            console.log("parent bubbling");
        }, false);
        document.getElementById("child").addEventListener("click", function () {
            console.log("child bubbling");
        }, false);
    </script>
</body>
</html>
  1. 捕获阶段：事件从最外层的元素（如document）开始，向内层元素传播，直到到达目标元素的父元素 。在这个阶段，如果元素绑定了事件处理程序，并且addEventListener的第三个参数为true，那么该事件处理程序会被触发。在上述代码中，当点击 “Click Me” 时，会先输出parent capturing，再输出child capturing。这是因为事件从parent元素开始捕获，然后到child元素。
  1. 目标阶段：事件到达目标元素本身，此时目标元素的事件处理程序会被触发。在代码里，点击 “Click Me” 后，会依次输出child target和parent target 。这里需要注意的是，虽然看起来有两个目标阶段的输出，但实际上对于child元素来说，它是真正的目标元素，而parent元素的目标阶段输出，是因为事件在传播过程中也会经过它。
  1. 冒泡阶段：事件从目标元素开始，向外层元素传播，直到到达最外层的元素 。在这个阶段，如果元素绑定了事件处理程序，并且addEventListener的第三个参数为false（默认值），那么该事件处理程序会被触发。在上述代码中，点击 “Click Me” 后，会先输出parent bubbling，再输出child bubbling 。这表明事件从child元素开始冒泡，然后到parent元素。

（二）事件委托如何利用事件流

事件委托正是利用了事件流中的冒泡阶段。当一个子元素触发事件时，事件会冒泡到它的父元素，我们可以在父元素上绑定一个事件处理程序，来处理所有子元素触发的相同类型事件。通过判断事件对象的target属性，我们能够确定具体是哪个子元素触发了事件，从而执行相应的操作 。

以下是一个简单的示例，展示如何通过事件委托为多个列表项添加点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        document.getElementById("list").addEventListener("click", function (event) {
            if (event.target.tagName === "LI") {
                console.log("You clicked on:", event.target.textContent);
            }
        });
    </script>
</body>
</html>

在这个例子中，我们没有为每个<li>元素单独绑定点击事件，而是在它们的父元素

    上绑定了点击事件。当点击任何一个<li>元素时，由于事件冒泡，<ul>元素上的点击事件处理程序会被调用 。通过检查event.target的tagName属性，我们可以判断出触发事件的是<li>元素，进而获取到该<li>元素的文本内容并输出。这样，即使后续动态添加了新的<li>元素，它们也会自动拥有点击事件的处理逻辑，无需再次为新元素绑定事件，大大提高了代码的简洁性和可维护性 。

    四、事件委托的优势

    （一）性能提升

    在前端开发中，性能是至关重要的因素。当页面上存在大量相似元素，且每个元素都需要绑定相同的事件时，传统的直接绑定事件方式会带来性能问题。因为每个事件处理程序都会占用一定的内存空间，随着元素数量的增加，内存占用也会急剧上升，从而影响页面的加载速度和响应性能。

    例如，在一个包含 1000 个列表项的无序列表中，如果为每个列表项直接绑定点击事件，代码如下：

    const listItems = document.querySelectorAll('li');
listItems.forEach((item) => {
    item.addEventListener('click', () => {
        console.log('You clicked on:', item.textContent);
    });
});

    在这段代码中，需要为 1000 个<li>元素分别绑定点击事件处理程序，这意味着会创建 1000 个事件处理函数，占用大量的内存。

    而使用事件委托，我们只需将点击事件绑定到父元素<ul>上，代码如下：

    const ul = document.getElementById('list');
ul.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        console.log('You clicked on:', event.target.textContent);
    }
});

    通过事件委托，无论<li>元素有多少个，都只需要一个事件处理程序，大大减少了内存的占用，提升了页面的性能。尤其是在处理大量元素时，这种性能提升的效果更加显著。

    （二）动态元素处理

    在现代 Web 应用中，页面元素往往是动态变化的。例如，在一个待办事项列表应用中，用户可以随时添加新的待办事项，也可以删除已有的事项。在这种情况下，如果使用传统的事件绑定方式，每当添加或删除一个元素时，都需要重新绑定或解绑相应的事件，这会使代码变得复杂且难以维护 。

    假设我们有一个动态列表，用户可以点击按钮添加新的列表项。使用事件委托的方式，代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul id="dynamicList">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
    </ul>
    <button id="addItem">Add Item</button>
    <script>
        const ul = document.getElementById('dynamicList');
        const addItemButton = document.getElementById('addItem');
        // 使用事件委托绑定点击事件
        ul.addEventListener('click', (event) => {
            if (event.target.tagName === 'LI') {
                console.log(`Clicked: ${event.target.textContent}`);
            }
        });
        // 动态添加新列表项
        addItemButton.addEventListener('click', () => {
            const newItem = document.createElement('li');
            newItem.textContent = `Item ${ul.children.length + 1}`;
            ul.appendChild(newItem);
        });
    </script>
</body>
</html>

    在上述代码中，我们通过事件委托将点击事件绑定到<ul>元素上。当用户点击添加按钮时，新的列表项会被动态添加到<ul>中。由于事件委托的特性，新添加的列表项无需重新绑定点击事件，就可以自动拥有点击事件的处理逻辑。这使得我们在处理动态元素时，代码更加简洁、高效，也提高了代码的可维护性 。

    （三）代码简洁性

    使用事件委托可以使代码结构更加清晰、简洁。对比直接绑定事件和使用事件委托的代码，能明显看出事件委托在代码简洁性上的优势。

    以一个包含多个按钮的页面为例，假设每个按钮都需要执行相同的点击操作，如果直接绑定事件，代码如下：

    const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');
button1.addEventListener('click', () => {
    console.log('Button 1 clicked');
});
button2.addEventListener('click', () => {
    console.log('Button 2 clicked');
});
button3.addEventListener('click', () => {
    console.log('Button 3 clicked');
});

    在这段代码中，为了实现每个按钮的点击操作，需要分别为每个按钮绑定点击事件处理程序，代码显得较为繁琐。

    而使用事件委托，我们可以将点击事件绑定到这些按钮的父元素上，代码如下：

    const parentElement = document.getElementById('parent');
parentElement.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
        console.log(`${event.target.id} clicked`);
    }
});

    通过事件委托，只需在父元素上绑定一次事件处理程序，就可以处理所有子按钮的点击事件。通过判断event.target的属性，我们能够确定具体是哪个按钮被点击，从而执行相应的操作。这样的代码结构更加简洁，减少了重复的事件绑定代码，提高了代码的可读性和可维护性 。

    五、代码实战

    （一）基础示例

    为了更直观地理解事件委托的实际应用，下面通过一个简单的 HTML 结构和 JavaScript 代码示例来展示。

    HTML 结构如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="parent">
        <button class="child">Button 1</button>
        <button class="child">Button 2</button>
        <button class="child">Button 3</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

    在上述 HTML 代码中，我们创建了一个父元素<div>，其id为parent，在这个父元素内部包含了三个子元素<button>，它们都具有相同的类名child。

    接下来，使用 JavaScript 代码实现事件委托：

    // 获取父元素
const parent = document.getElementById('parent');
// 为父元素绑定点击事件
parent.addEventListener('click', function (event) {
    // 判断触发事件的元素是否为子按钮
    if (event.target.classList.contains('child')) {
        console.log('You clicked on:', event.target.textContent);
    }
});

    在这段 JavaScript 代码中，首先通过getElementById方法获取到id为parent的父元素。然后，使用addEventListener方法为父元素绑定一个点击事件。当点击事件触发时，会执行回调函数。在回调函数中，通过event.target.classList.contains('child')来判断触发事件的元素是否具有child类名，如果是，则说明点击的是子按钮。最后，通过event.target.textContent获取到被点击按钮的文本内容并输出到控制台。

    通过这个基础示例可以看到，借助事件委托，我们只需在父元素上绑定一次点击事件，就能处理所有子按钮的点击操作，代码简洁且高效。

    （二）复杂场景应用

    在实际的前端开发中，经常会遇到更为复杂的交互场景。以购物车商品列表为例，购物车中不仅包含商品信息，还涉及添加、删除商品，修改商品数量等多种操作。下面通过代码展示如何运用事件委托来实现这些功能。

    HTML 结构如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        table {
            border-collapse: collapse;
        }
        table th,
        table td {
            border: 1px solid #000;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Shopping Cart</h1>
    <table id="cartTable">
        <thead>
            <tr>
                <th>Item</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Product 1</td>
                <td>10.00</td>
                <td><input type="number" value="1" class="quantity"></td>
                <td>10.00</td>
                <td><button class="delete">Delete</button></td>
            </tr>
            <tr>
                <td>Product 2</td>
                <td>20.00</td>
                <td><input type="number" value="1" class="quantity"></td>
                <td>20.00</td>
                <td><button class="delete">Delete</button></td>
            </tr>
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

    在这个 HTML 结构中，我们创建了一个购物车表格，包含商品名称、价格、数量、总价和操作列。每个商品行都有一个删除按钮和一个用于修改数量的输入框。

    JavaScript 代码实现如下：

    // 获取购物车表格
const cartTable = document.getElementById('cartTable');
// 为购物车表格绑定点击事件
cartTable.addEventListener('click', function (event) {
    // 判断点击的是否是删除按钮
    if (event.target.classList.contains('delete')) {
        const row = event.target.closest('tr');
        if (row) {
            row.remove();
            updateTotals();
        }
    }
    // 判断点击的是否是数量输入框
    else if (event.target.classList.contains('quantity')) {
        const price = parseFloat(event.target.closest('tr').querySelector('td:nth-child(2)').textContent);
        const quantity = parseInt(event.target.value);
        const totalTd = event.target.closest('tr').querySelector('td:nth-child(4)');
        totalTd.textContent = (price * quantity).toFixed(2);
        updateTotals();
    }
});
// 更新所有商品的总价和总数量
function updateTotals() {
    const rows = cartTable.querySelectorAll('tbody tr');
    let totalPrice = 0;
    let totalQuantity = 0;
    rows.forEach((row) => {
        const price = parseFloat(row.querySelector('td:nth-child(2)').textContent);
        const quantity = parseInt(row.querySelector('td:nth-child(3) input').value);
        totalPrice += price * quantity;
        totalQuantity += quantity;
    });
    console.log('Total Price:', totalPrice.toFixed(2));
    console.log('Total Quantity:', totalQuantity);
}

    在这段 JavaScript 代码中，首先获取到id为cartTable的购物车表格，并为其绑定点击事件。当点击事件触发时，通过判断event.target的类名来确定用户的操作。

    如果点击的是具有delete类名的删除按钮，使用closest方法找到对应的商品行，并将其从 DOM 中移除，然后调用updateTotals函数更新购物车中所有商品的总价和总数量。

    如果点击的是具有quantity类名的数量输入框，获取该商品的价格和用户输入的数量，计算出当前商品的总价并更新到对应的单元格中，同样调用updateTotals函数更新购物车的总价和总数量。

    updateTotals函数通过遍历购物车表格中的每一行，获取商品的价格和数量，计算出所有商品的总价和总数量，并输出到控制台。在实际应用中，这些数据可以显示在页面上，为用户提供购物车的汇总信息。

    通过这个复杂场景的应用示例，可以清晰地看到事件委托在处理复杂交互场景时的强大能力。它不仅简化了代码的编写，还提高了代码的可维护性和扩展性，使得购物车功能的实现更加高效和灵活 。

    六、注意事项与陷阱

    （一）事件类型限制

    并非所有的事件都支持冒泡，因此不能对这些事件使用事件委托 。例如focus、blur、scroll和mouseenter、mouseleave等事件就不支持冒泡。focus事件在元素获得焦点时触发，blur事件在元素失去焦点时触发，它们主要用于处理与元素焦点相关的操作。由于这些事件不冒泡，无法通过父元素来捕获子元素的focus和blur事件。如果尝试对input元素的focus事件使用事件委托，将无法实现预期的效果。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="parent">
        <input type="text" id="input1">
    </div>
    <script>
        const parent = document.getElementById('parent');
        const input1 = document.getElementById('input1');
        // 尝试对focus事件使用事件委托，无效
        parent.addEventListener('focus', function () {
            console.log('parent focus');
        });
        // 直接在input元素上绑定focus事件，有效
        input1.addEventListener('focus', function () {
            console.log('input focus');
        });
    </script>
</body>
</html>

    在上述代码中，为parent元素绑定focus事件委托，当input1元素获得焦点时，parent元素上的focus事件处理程序不会被触发。只有直接在input1元素上绑定focus事件，才能在其获得焦点时执行相应的操作 。

    同样，scroll事件在元素滚动时触发，它也不支持冒泡。假设页面中有一个可滚动的div元素，为其祖先元素绑定scroll事件委托，无法捕获到该div元素的滚动事件。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #parent {
            height: 200px;
            width: 200px;
            overflow: auto;
        }
        #child {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script>
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');
        // 尝试对scroll事件使用事件委托，无效
        document.addEventListener('scroll', function () {
            console.log('document scroll');
        });
        // 直接在parent元素上绑定scroll事件，有效
        parent.addEventListener('scroll', function () {
            console.log('parent scroll');
        });
    </script>
</body>
</html>

    在这段代码中，parent元素设置了overflow: auto，使其具有滚动条。为document元素绑定scroll事件委托，当滚动parent元素时，document元素上的scroll事件处理程序不会被触发。只有直接在parent元素上绑定scroll事件，才能在其滚动时执行相应的操作 。

    （二）事件对象的正确使用

    在事件委托中，正确获取和使用事件对象event的属性至关重要。其中，event.target用于获取触发事件的实际目标元素，而event.currentTarget则指向绑定事件处理程序的元素。在实际应用中，需要根据具体需求准确使用这两个属性，避免混淆导致错误。

    以一个包含多个按钮的列表为例，假设我们通过事件委托为列表的父元素绑定点击事件，代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul id="parent">
        <li><button>Button 1</button></li>
        <li><button>Button 2</button></li>
        <li><button>Button 3</button></li>
    </ul>
    <script>
        const parent = document.getElementById('parent');
        parent.addEventListener('click', function (event) {
            // 使用event.target获取实际触发事件的按钮
            console.log('You clicked on:', event.target.textContent);
            // 使用event.currentTarget获取绑定事件的父元素
            console.log('Event bound to:', event.currentTarget.tagName);
        });
    </script>
</body>
</html>

    在上述代码中，当点击某个按钮时，event.target会返回被点击的按钮元素，通过event.target.textContent可以获取按钮的文本内容。而event.currentTarget则始终指向绑定点击事件的parent元素（即<ul>元素），通过event.currentTarget.tagName可以获取其标签名 。

    如果在事件处理程序中错误地使用event.currentTarget来获取触发事件的元素，可能会导致获取到的不是预期的按钮元素，从而影响程序的正常逻辑。例如，若将console.log('You clicked on:', event.target.textContent);误写成console.log('You clicked on:', event.currentTarget.textContent);，当点击按钮时，输出的将是parent元素的文本内容，而不是按钮的文本内容，这显然不符合预期 。

    （三）委托层级的选择

    在使用事件委托时，选择合适的委托层级非常关键。委托层级过高，事件冒泡的路径会变长，这将增加事件传播的时间和性能开销。当页面结构复杂，从子元素到委托的祖先元素之间经过多层 DOM 节点时，事件冒泡过程中会触发多次不必要的事件处理程序，从而影响页面的响应速度。

    假设页面中有一个复杂的嵌套结构，如body -> div -> ul -> li -> button，如果将点击事件委托给body元素，当点击按钮时，事件需要从button开始，依次经过li、ul、div，最后到达body，这个过程中会触发多次不必要的事件处理程序，导致性能下降 。

    相反，委托层级过低可能会导致误判。如果选择的父元素离目标子元素太近，可能会捕获到其他非预期元素的事件。比如，在一个包含多个列表项的列表中，每个列表项内又包含多个子元素，若将点击事件委托给离列表项较近的父元素，当点击列表项内的其他子元素时，也会触发列表项的点击事件，这可能会导致逻辑错误 。

    为了避免这些问题，应尽量选择离目标子元素较近且具有代表性的稳定父元素作为委托对象。在处理列表项的点击事件时，将事件委托给列表的<ul>元素是比较合适的选择。这样既能减少事件冒泡的层级，提高性能，又能准确地捕获到列表项的事件，避免误判 。

    七、总结回顾

    事件委托是前端 JS 开发中一项极为实用的技术，它巧妙地利用事件冒泡原理，将子元素的事件处理委托给父元素，从而实现高效的事件管理 。通过本文的介绍，我们了解到事件委托不仅能够显著提升页面性能，减少内存消耗，还能轻松应对动态元素的事件绑定问题，使代码更加简洁、易于维护 。

    在实际应用中，我们需要根据具体的业务场景，合理选择委托层级，正确使用事件对象，同时要注意并非所有事件都适合使用事件委托 。希望大家通过本文的学习，能够熟练掌握事件委托的技巧，并将其灵活运用到项目开发中，为打造更加高效、优质的前端应用助力 。

avatar
文章
阅读
粉丝