js 事件 如何实现
事件监听与处理
在JavaScript中，事件处理通常通过addEventListener方法实现。该方法允许为DOM元素绑定特定事件的回调函数。语法如下：
element.addEventListener(eventType, callbackFunction, useCapture);eventType为字符串（如"click"），callbackFunction是事件触发时执行的函数，useCapture为可选的布尔值，指定事件冒泡阶段。
内联事件属性
直接在HTML元素中通过属性声明事件，例如：
<button onclick="alert('Clicked')">点击</button>这种方式虽然简单，但不利于维护和分离逻辑，现代开发中推荐避免使用。
事件对象
回调函数会自动接收event对象参数，包含事件相关信息：
element.addEventListener("click", function(event) {
console.log(event.target); // 触发事件的元素
event.preventDefault(); // 阻止默认行为
});事件委托
通过事件冒泡机制，在父元素上监听子元素的事件：
document.getElementById("parent").addEventListener("click", function(event) {
if (event.target.matches("button.child")) {
console.log("子按钮被点击");
}
});这种方式适合动态添加的子元素，减少事件监听器数量。
移除事件监听
使用removeEventListener移除绑定的事件，需确保回调函数是同一引用：
const handler = () => console.log("触发");
element.addEventListener("click", handler);
element.removeEventListener("click", handler);自定义事件
通过CustomEvent创建和触发自定义事件：
const event = new CustomEvent("customEvent", { detail: { data: "示例" } });
element.dispatchEvent(event);
element.addEventListener("customEvent", (e) => console.log(e.detail.data));事件冒泡与捕获
事件传播分为捕获阶段（由外向内）和冒泡阶段（由内向外）。useCapture参数设置为true可在捕获阶段处理事件：
document.querySelector("div").addEventListener("click", handler, true);阻止事件传播
在回调中调用event.stopPropagation()可阻止事件继续冒泡或捕获，event.stopImmediatePropagation()还会阻止同一元素的其他监听器执行。
