当前位置：首页 > JavaScript

js监听实现

2026-03-15 00:10:29JavaScript

事件监听基础语法

在JavaScript中，使用addEventListener方法监听DOM事件。语法如下：

js监听实现

element.addEventListener(eventName, callbackFunction, [options]);

eventName：字符串，表示事件类型（如'click'、'keydown'）
callbackFunction：事件触发时执行的回调函数
options：可选参数对象，可配置capture、once等特性

常见事件类型示例

// 点击事件
button.addEventListener('click', () => console.log('Button clicked'));

// 键盘事件
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') console.log('Enter pressed');
});

// 鼠标移动事件
document.addEventListener('mousemove', (e) => {
  console.log(`Mouse at (${e.clientX}, ${e.clientY})`);
});

事件委托模式

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

js监听实现

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('List item clicked:', e.target.textContent);
  }
});

自定义事件触发

创建并派发自定义事件：

// 创建事件
const event = new CustomEvent('build', { detail: { time: Date.now() } });

// 监听事件
elem.addEventListener('build', (e) => {
  console.log('Custom event triggered:', e.detail);
});

// 触发事件
elem.dispatchEvent(event);

性能优化建议

对频繁触发的事件（如scroll、resize）使用防抖/节流
不需要时及时移除监听器：removeEventListener
避免在循环中重复添加相同监听器

移除事件监听

必须使用与添加时完全相同的参数引用：

function handleClick() { /* ... */ }

// 添加监听
button.addEventListener('click', handleClick);

// 移除监听
button.removeEventListener('click', handleClick);

标签: js