js实现监听

监听事件的基本方法

在JavaScript中，监听事件主要通过addEventListener方法实现。该方法允许为特定元素绑定事件处理函数，支持多种事件类型（如点击、键盘输入等）。

element.addEventListener('eventType', function(event) {
  // 事件处理逻辑
});

常见事件类型

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

事件委托模式

通过事件冒泡机制，可以在父元素上监听子元素的事件，适用于动态生成的元素。

parentElement.addEventListener('click', function(event) {
  if (event.target.matches('.child-selector')) {
    // 处理子元素事件
  }
});

移除事件监听

使用removeEventListener移除已绑定的事件处理函数，需确保移除的函数与绑定的函数是同一引用。

function handleClick() {
  console.log('Clicked');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

自定义事件

通过CustomEvent构造函数创建自定义事件，并配合dispatchEvent触发。

const customEvent = new CustomEvent('customEvent', {
  detail: { key: 'value' }
});
element.addEventListener('customEvent', (e) => console.log(e.detail));
element.dispatchEvent(customEvent);

被动事件监听器

添加{ passive: true }选项可优化滚动性能，避免阻塞主线程。

window.addEventListener('scroll', onScroll, { passive: true });

一次性事件监听

使用{ once: true }选项使事件处理函数仅执行一次后自动移除。

button.addEventListener('click', () => {
  console.log('This runs only once');
}, { once: true });