js监听实现

事件监听基础方法

在JavaScript中，事件监听可通过以下方式实现：

addEventListener方法
语法：

element.addEventListener(eventType, callback, useCapture);

• eventType：事件类型（如"click"、"keydown"）。
• callback：事件触发时执行的函数。
• useCapture（可选）：布尔值，指定事件捕获阶段（true）或冒泡阶段（false，默认）。

示例：

document.getElementById("button").addEventListener("click", function() {
    console.log("按钮被点击");
});

移除事件监听

使用removeEventListener移除已添加的监听器，需传递与添加时相同的函数引用：

const handler = () => console.log("仅触发一次");
element.addEventListener("click", handler);
element.removeEventListener("click", handler); // 移除监听

事件委托（Event Delegation）

通过父元素监听子元素事件，适用于动态内容或大量子元素：

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target.classList.contains("child")) {
        console.log("子元素被点击");
    }
});

自定义事件

创建并触发自定义事件：

const customEvent = new CustomEvent("myEvent", { detail: { data: "示例数据" } });
element.addEventListener("myEvent", (e) => console.log(e.detail.data));
element.dispatchEvent(customEvent); // 触发事件

常见事件类型

• 鼠标事件：click、mouseover、mouseout
• 键盘事件：keydown、keyup
• 表单事件：submit、change、focus
• 窗口事件：resize、scroll

注意事项

• 避免匿名函数导致无法移除监听。
• 事件委托减少内存消耗，提升性能。
• 使用event.preventDefault()阻止默认行为（如表单提交）。