js 事件 如何实现

事件绑定方法

DOM 元素属性绑定 通过 HTML 元素的 on[event] 属性直接绑定事件：

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

DOM 对象属性绑定 通过 JavaScript 直接为 DOM 对象的事件属性赋值：

document.getElementById('myBtn').onclick = function() {
  console.log('Button clicked');
};

事件监听器

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

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

removeEventListener 移除事件监听时需要保持函数引用一致：

const handler = () => console.log('Event');
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

事件对象

常用属性

• target：触发事件的元素
• currentTarget：绑定事件的元素
• type：事件类型
• preventDefault()：阻止默认行为
• stopPropagation()：阻止事件冒泡

事件委托

利用事件冒泡机制在父元素上处理子元素事件：

document.getElementById('parent').addEventListener('click', function(event) {
  if(event.target.classList.contains('child')) {
    // 处理子元素事件
  }
});

自定义事件

创建和触发自定义事件：

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

// 监听事件
document.addEventListener('build', function(e) {
  console.log('自定义事件:', e.detail);
});

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

常见事件类型

鼠标事件

• click：单击
• dblclick：双击
• mouseenter/mouseleave：进入/离开元素
• mousemove：鼠标移动

键盘事件

• keydown：按键按下
• keyup：按键释放
• keypress：按键按下（已弃用）

表单事件

• submit：表单提交
• change：值改变
• focus/blur：获取/失去焦点

性能优化

事件节流 限制事件触发频率：

function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if(now - lastCall < delay) return;
    lastCall = now;
    return func.apply(this, args);
  };
}

window.addEventListener('resize', throttle(function() {
  console.log('Resize event');
}, 200));

被动事件监听器 提升滚动性能：

window.addEventListener('scroll', function() {
  // 处理逻辑
}, { passive: true });