js实现event

事件监听与触发

在JavaScript中，事件处理通常通过addEventListener方法实现。该方法允许为特定事件绑定回调函数，例如点击、键盘输入等。

element.addEventListener('click', function(event) {
  console.log('Element clicked', event.target);
});

自定义事件创建

使用CustomEvent构造函数可以创建自定义事件，支持传递详细数据。通过detail属性可附加任意数据供监听器使用。

const customEvent = new CustomEvent('build', {
  detail: { time: Date.now() }
});

事件触发机制

创建的事件需要通过dispatchEvent方法触发。该方法会将事件分派到目标对象，执行已注册的监听器。

element.dispatchEvent(customEvent);

事件委托模式

利用事件冒泡机制，可在父元素上统一处理子元素事件。这种方式适合动态添加的元素，减少内存消耗。

document.getElementById('parent').addEventListener('click', function(event) {
  if(event.target.matches('.child')) {
    console.log('Child element clicked');
  }
});

事件对象属性

事件对象包含关键属性和方法：

• target：触发事件的原始元素
• currentTarget：当前处理事件的元素
• stopPropagation()：阻止事件继续传播
• preventDefault()：阻止默认行为

element.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log(event.target.id);
});

一次性事件处理

设置{once: true}选项可使监听器只执行一次，适用于单次交互场景。

button.addEventListener('click', function() {
  console.log('This will log only once');
}, { once: true });