当前位置：首页 > JavaScript

js 监听实现

2026-03-13 20:10:20JavaScript

事件监听基础

在JavaScript中，通过addEventListener方法实现事件监听。语法如下：

element.addEventListener(eventType, callback, options);

eventType：事件类型（如"click"、"keydown"）。
callback：事件触发时执行的函数。
options：可选参数（如{ once: true }表示只触发一次）。

常见事件类型

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

事件对象

回调函数接收event对象，包含事件相关信息：

js 监听实现

button.addEventListener("click", (event) => {
  console.log(event.target); // 触发事件的元素
  event.preventDefault();    // 阻止默认行为
});

事件委托

通过父元素监听子元素事件，利用事件冒泡机制：

js 监听实现

document.getElementById("parent").addEventListener("click", (event) => {
  if (event.target.classList.contains("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.addEventListener("customEvent", (e) => console.log(e.detail.data));
element.dispatchEvent(event); // 触发事件