当前位置：首页 > JavaScript

js实现事件原理

2026-02-03 08:23:40JavaScript

JavaScript 事件原理

JavaScript 事件机制基于事件流模型，分为捕获阶段、目标阶段和冒泡阶段。事件从顶层元素向下传递到目标元素（捕获阶段），在目标元素触发（目标阶段），再从目标元素向上冒泡到顶层元素（冒泡阶段）。

事件绑定方式

DOM0级事件
通过元素属性直接绑定事件处理函数：

element.onclick = function() { console.log('Clicked'); };

DOM2级事件
使用 addEventListener 方法，支持捕获和冒泡阶段：

js实现事件原理

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

第三个参数为 true 时监听捕获阶段，false 时监听冒泡阶段（默认）。

事件对象

事件处理函数接收一个 event 对象，包含事件相关信息：

event.target：触发事件的原始元素。
event.currentTarget：当前正在处理事件的元素（与 this 相同）。
event.stopPropagation()：阻止事件进一步传播（冒泡或捕获）。
event.preventDefault()：阻止默认行为（如链接跳转）。

事件委托

利用事件冒泡机制，将事件监听器绑定到父元素，通过 event.target 判断实际触发元素：

js实现事件原理

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.matches('li')) {
    console.log('List item clicked:', event.target.textContent);
  }
});

自定义事件

通过 CustomEvent 创建和触发自定义事件：

const event = new CustomEvent('customEvent', { detail: { data: 'example' } });
element.dispatchEvent(event);

异步事件

事件循环（Event Loop）机制决定了事件的执行顺序。宏任务（如 setTimeout）和微任务（如 Promise）会影响事件的触发时机。

性能优化

避免频繁绑定/解绑事件，使用事件委托减少监听器数量。
对高频事件（如 scroll、resize）使用防抖（debounce）或节流（throttle）。

兼容性处理

旧版 IE 使用 attachEvent 和 detachEvent，需做兼容判断：

if (element.addEventListener) {
element.addEventListener('click', handler);
} else if (element.attachEvent) {
element.attachEvent('onclick', handler);
}