JavaScript 事件委托

摘要：在本教程中，您将学习如何使用 JavaScript 事件委托，该技术将单个事件处理程序添加到父元素，而不是为子元素注册多个事件处理程序。

JavaScript 事件委托简介

假设您有以下菜单

<ul id="menu">
    <li><a id="home">home</a></li>
    <li><a id="dashboard">Dashboard</a></li>
    <li><a id="report">report</a></li>
</ul>Code language: HTML, XML (xml)

要处理每个菜单项的click事件，您可以添加相应的click事件处理程序

let home = document.querySelector('#home');
home.addEventListener('click',(event) => {
    console.log('Home menu item was clicked');
});

let dashboard = document.querySelector('#dashboard');
dashboard.addEventListener('click',(event) => {
    console.log('Dashboard menu item was clicked');
});

let report = document.querySelector('#report');
report.addEventListener('click',(event) => {
    console.log('Report menu item was clicked');
});
Code language: JavaScript (javascript)

在 JavaScript 中，如果您在页面上有很多事件处理程序，这些事件处理程序会直接影响性能，原因如下

• 首先，每个事件处理程序都是一个函数，它也是一个对象，占用内存。内存中对象越多，性能越慢。
• 其次，分配所有事件处理程序需要时间，这会导致页面交互延迟。

要解决此问题，您可以利用事件冒泡。

您可以分配单个事件处理程序来处理所有click事件，而不是拥有多个事件处理程序

let menu = document.querySelector('#menu');

menu.addEventListener('click', (event) => {
    let target = event.target;

    switch(target.id) {
        case 'home':
            console.log('Home menu item was clicked');
            break;
        case 'dashboard':
            console.log('Dashboard menu item was clicked');
            break;
        case 'report':
            console.log('Report menu item was clicked');
            break;
    }
});Code language: JavaScript (javascript)

它是如何工作的。

• 当您单击<ul>元素（id 为menu）内部的任何<a>元素时，click事件会冒泡到父元素，即<ul>元素。因此，您可以捕获父元素的click事件，而不是处理单个<a>元素的click事件。
• 在click事件侦听器中，您可以访问target属性，该属性引用了分派事件的元素。要获取触发事件的元素的id，您可以使用target.id属性。
• 一旦拥有触发click事件的元素的id，您就可以相应地执行处理事件的代码。

我们处理过多事件处理程序问题的方法称为事件委托。

事件委托指的是使用事件冒泡在 DOM 中比事件源元素更高级别处理事件的技术

JavaScript 事件委托的优势

如果可能，您可以在document上使用单个事件处理程序来处理特定类型的事件。这样做，您将获得以下好处

• 更少的内存使用，更好的性能。
• 在页面上设置事件处理程序所需的时间更少。
• document对象立即可用。只要渲染了元素，它就可以立即开始正常运行，无需等待DOMContentLoaded或load事件。

总结

• 拥有大量事件处理程序会占用内存并降低页面的性能。
• 事件委托技术利用事件冒泡在 DOM 中比事件源元素更高级别处理事件。