当前位置：首页 > JavaScript

js实现监听

2026-04-06 23:29:18JavaScript

事件监听基础

在JavaScript中，事件监听是通过addEventListener方法实现的。该方法允许为DOM元素添加事件处理函数，语法如下：

element.addEventListener(eventType, callbackFunction, options);

eventType：字符串，指定要监听的事件类型（如"click"、"keydown"）
callbackFunction：事件触发时执行的函数
options：可选参数，可指定capture、once等配置

常用事件类型

鼠标事件：click、dblclick、mouseenter、mouseleave
键盘事件：keydown、keyup、keypress
表单事件：submit、change、focus、blur
窗口事件：resize、scroll、load

事件对象

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

js实现监听

element.addEventListener("click", function(event) {
  console.log(event.target); // 触发事件的元素
  console.log(event.clientX); // 鼠标X坐标
});

移除监听

使用removeEventListener移除已添加的监听器，需保持参数一致：

const handler = () => console.log("Clicked");
element.addEventListener("click", handler);
element.removeEventListener("click", handler);

事件委托

通过事件冒泡机制，在父元素上监听子元素的事件：

js实现监听

document.querySelector("#parent").addEventListener("click", (event) => {
  if (event.target.matches(".child")) {
    console.log("Child element clicked");
  }
});

自定义事件

可以创建和触发自定义事件：

const customEvent = new CustomEvent("myEvent", { detail: { data: 123 } });
element.addEventListener("myEvent", (e) => console.log(e.detail.data));
element.dispatchEvent(customEvent);

异步事件处理

使用Promise包装事件监听：

function waitForEvent(element, eventType) {
  return new Promise(resolve => {
    element.addEventListener(eventType, resolve, { once: true });
  });
}

await waitForEvent(button, "click");
console.log("Button clicked");