js event实现

JavaScript 事件实现

JavaScript 事件是用于处理用户交互或浏览器行为的核心机制。以下是几种常见的事件实现方式：

内联事件处理

在 HTML 元素中直接添加事件属性，例如：

<button onclick="alert('Clicked!')">点击</button>

DOM 属性绑定

通过 JavaScript 获取元素并为其事件属性赋值：

const button = document.querySelector('button');
button.onclick = function() {
  console.log('Button clicked');
};

addEventListener

推荐的标准方法，支持多个事件监听器：

const button = document.querySelector('button');
button.addEventListener('click', function(event) {
  console.log('Event type:', event.type);
});

事件委托

利用事件冒泡机制处理动态元素：

document.body.addEventListener('click', function(event) {
  if (event.target.matches('.item')) {
    console.log('Item clicked:', event.target);
  }
});

自定义事件

创建和触发自定义事件：

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

element.addEventListener('build', function(e) {
  console.log('Custom event:', e.detail);
});

事件对象常用属性

• event.target：触发事件的元素
• event.currentTarget：当前处理事件的元素
• event.preventDefault()：阻止默认行为
• event.stopPropagation()：停止事件冒泡

事件类型示例

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

异步事件处理

使用 Promise 封装事件：

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

// 使用示例
waitForEvent(button, 'click').then(() => {
  console.log('Button was clicked');
});

性能优化建议

• 对频繁触发的事件（如 scroll、resize）使用防抖或节流
• 及时移除不需要的事件监听器
• 合理使用被动事件监听器提高滚动性能：

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