事件委托如何提高 Vanilla JavaScript 性能和代码简单性？

使用 Vanilla JavaScript 进行事件委托

在 vanilla JavaScript 中，事件委托是一种用于将事件侦听器附加到单个父元素而不是其中的各个元素。这种方法消除了对多个事件侦听器的需求，并简化了代码，从而提高了性能。

有效的事件委托

要有效地实现事件委托，请使用以下步骤：

1. 查找事件将发生的父元素。
2. 添加事件侦听所需事件类型（例如单击）的父元素。
3. 在事件处理程序内，检查单击的元素是否与特定选择器匹配或其父元素与选择器匹配。
4. 如果满足条件，则执行所需的函数或操作。

示例：委托 jQuery代码

考虑以下 jQuery 代码：

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

要将此代码转换为普通 JavaScript，请使用以下内容：

document.querySelector('#main').addEventListener('click', (e) => {
    if (e.target.closest('.focused')) {
        settingsPanel();
    }
});

在此代码中，我们使用 querySelector() 查找 ID 为 main 的父元素，并为其附加一个单击事件侦听器。当单击此父级中的元素时，它会检查被单击的元素或其任何父级元素是否具有 .focused 类。如果是这样，它会调用 settingsPanel() 函数。

委托的好处：

• 改进的性能：消除了对多个事件监听器，减少事件处理次数函数。
• 简化的代码：与为每个元素使用单独的事件侦听器相比，更容易维护和理解。
• 灵活性：允许动态绑定基于选择器的事件处理程序，使您能够处理来自可能动态添加或删除的元素的事件。

以上是事件委托如何提高 Vanilla JavaScript 性能和代码简单性？的详细内容。更多信息请关注PHP中文网其他相关文章！