当前位置：首页 > JavaScript

js事件实现

2026-03-15 12:03:02JavaScript

事件绑定方法

使用 addEventListener 绑定事件是最推荐的方式，支持多个事件处理函数且可精确控制事件阶段。语法如下：

element.addEventListener(eventType, handler, useCapture);

on[event] 属性直接赋值是传统方式，但会覆盖已有处理函数：

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

事件对象常用属性

事件处理函数接收的 event 对象包含关键信息：

event.target：触发事件的原始元素
event.currentTarget：当前处理事件的元素（绑定处理函数的元素）
event.stopPropagation()：阻止事件冒泡
event.preventDefault()：阻止默认行为

事件委托模式

通过冒泡机制在父元素处理子元素事件，适合动态内容：

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

自定义事件触发

创建并派发自定义事件实现组件通信：

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

常用事件类型

鼠标事件：

click：元素被点击
mouseenter/mouseleave：指针进入/离开元素区域
mousemove：指针在元素内移动

键盘事件：

keydown/keyup：按键按下/释放
keypress：按键按下（已废弃）

表单事件：

submit：表单提交
change：表单控件值改变
focus/blur：元素获得/失去焦点

性能优化技巧

使用事件委托减少监听器数量，对频繁触发的事件（如scroll、mousemove）进行节流：

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

window.addEventListener('scroll', throttle(function() {
  console.log('Scrolling');
}, 200));

移动端特殊事件

触摸事件：

touchstart：手指触摸屏幕
touchmove：手指在屏幕上滑动
touchend：手指离开屏幕

手势事件：

gesturestart：多指触摸开始
gesturechange：手指间距或角度变化
gestureend：多指触摸结束

事件移除方式

使用 removeEventListener 移除事件需保持参数一致：

js事件实现

const handler = function() { console.log('Event'); };
element.addEventListener('click', handler);
// 后续移除
element.removeEventListener('click', handler);