掌握JavaScript事件委托技巧

在现代的 JavaScript 开发中，事件处理对于让 web 应用程序变得互动和动态至关重要。随着应用规模的扩大，管理事件监听器的复杂性也会随之增加。此时出现了 事件委托 这一概念，它是一种利用 JavaScript 的 事件冒泡 机制来优化事件处理的强大模式。

事件委托是一种技巧或方法，你只需将一个事件监听器附加到父元素，以管理子元素上的事件。而不是为每个子元素分别添加监听器，父元素捕获冒泡事件并确定事件源。

它是怎么运作呢？

事件委托基于两种关键的 JavaScript 机制。

• 冒泡事件： 事件从目标元素冒泡到 DOM 树的根节点。

• event.target: 标识事件源元素。

JavaScript中的事件会遵循一个可预测的生命周期在DOM中。理解这些阶段对于掌握委托技巧至关重要：

1.捕获阶段： 事件从根节点开始，遍历至目标元素。
2.目标阶段： 事件在目标元素上触发。
3.冒泡阶段： 事件向上冒泡到根节点，从目标元素开始。

事件委托主要在冒泡阶段生效。

场景1：处理列表项的点击事件
不是为每个列表项添加监听器，而是：

    const ul = document.querySelector("ul");
    ul.addEventListener("click", (event) => {
        if (event.target.tagName === "LI") {
            console.log("控制台输出点击的项目:", event.target.textContent);
        }
    });

点全屏/退出全屏

这个单一的监听器管理所有的li元素，甚至那些动态添加的也不例外。

    const ul = document.querySelector("ul");
    ul.innerHTML += "<li>新项目项</li>"; // 不需要新增监听器；

进入全屏，退出全屏

场景2：
结合事件委托与多种事件类型的检查：

    document.querySelector("#container").addEventListener("click", (event) => {
        if (event.target.matches(".button")) {
            console.log("点击了按钮");
        } else if (event.target.matches(".link")) {
            console.log("点击了链接");
        }
    });

全屏模式，退出全屏

情景3：处理带有委派的表单操作

    document.querySelector("#form").addEventListener("input", (event) => {
        if (event.target.matches("input[name='email']")) {
            console.log("邮箱更新了:", event.target.value);
        } else if (event.target.matches("input[name='password']")) {
            console.log("密码更新了.");
        }
    });

进入全屏，退出全屏

这种方法确保任何动态添加的新的输入框都能自动处理。

1. 使用具体的选择器: 避免使用过于宽泛的匹配，以防止意外行为。可以使用 event.target.matches() 或 event.target.closest() 方法。
2. 避免过度委派: 如果父元素包含大量子元素，将过多的事件委派给父元素可能会导致效率变低。
3. 合理安排条件: 结构化你的条件以最小化不必要的检查。
4. 节流或防抖事件: 对于像 scroll 或 resize 这样的事件，可以通过节流来提高性能：

    // 节流函数，限制回调函数的执行频率
    function throttle(callback, delay) {
        let lastTime = 0;
        return function (...args) {
            const now = Date.now();
            if (now - lastTime >= delay) {
                callback(...args);
                lastTime = now;
            }
        };
    }
    // 当滚动时，每隔200毫秒打印"Scrolled!"
    document.addEventListener("scroll", throttle(() => console.log("Scrolled!"), 200));

全屏模式 退出全屏

React
虽然 React 抽象了 DOM 操作的过程，你可以在合成事件中看到类似委托的效果。React 使用一个根监听器来监听和处理其虚拟 DOM 中的所有事件。

jQuery，jQuery的.on()方法简化了事件委托处理。

    $(document).on("click", ".dynamic-button", function () {
        console.log("按钮被点了:", $(this).data("id"));
    });

全屏显示 退出全屏

1.意外匹配
确保你的选择器不会意外地选中无关的元素，可以使用具体的选择器，或者使用 event.target.closest() 方法。

2.防止事件冒泡
有时，你可能需要阻止特定元素的事件冒泡。

    document.querySelector("#container").addEventListener("click", (event) => {
        if (event.target.matches(".prevent-bubble")) {
            event.stopPropagation();
        }
    });

    document.querySelector("#container").addEventListener("click", (event) => {
        if (event.target.matches(".prevent-bubble")) {
            event.stopPropagation();
        }
    });

In this context, the original code is kept as-is because the technical terms and syntax are universally recognized and do not have direct Chinese translations that are commonly used. Hence, the code remains untranslated.

全屏, 退出全屏

1.基准点
事件代理能够减少大型DOM中的内存使用，但如果父元素处理了太多事件，则可能会导致延迟。

2.开发者工具
使用浏览器开发者工具（如Chrome控制台中的getEventListeners）查看附加的事件监听器。

获取事件监听器(document.querySelector("#parent"))

全屏显示 退出全屏

• 模拟非冒泡事件中的委托处理： 一些事件，如focus和blur没有冒泡行为。建议使用例如focusin和focusout代替。

    document.addEventListener("focusin", (event) => {
        console.log("得到了焦点:", event.target);
    });

全屏查看，退出全屏

• 在根级别附加监听器: 为了最大程度的灵活性，在单页应用 (SPA) 或动态内容中，将监听器附加到文档（document）。

JavaScript 事件代理 是一种关键的优化策略，能够高效地适应扩展交互式应用程序。通过将事件处理集中在一处、减少内存占用并提高维护性，它使开发人员能够构建稳健且高性能的 web 应用。

以下为分割线

我的主页：https://shafayet.zya.me

给你个梗（可能你会觉得超有共鸣）＾＾＾＾