当前位置：首页 > JavaScript

js实现事件

2026-04-05 15:13:24JavaScript

事件绑定基础语法

在JavaScript中，可以通过addEventListener方法为DOM元素绑定事件。语法如下：

element.addEventListener(eventType, handlerFunction, useCapture);

eventType: 事件类型字符串，如'click'、'mouseover'
handlerFunction: 事件触发时执行的函数
useCapture: 可选布尔值，指定事件捕获阶段触发（默认为冒泡阶段）

常用事件类型示例

// 点击事件
document.getElementById('btn').addEventListener('click', function() {
  console.log('按钮被点击');
});

// 鼠标移入事件
element.addEventListener('mouseenter', () => {
  element.style.backgroundColor = 'yellow';
});

// 键盘事件
document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    submitForm();
  }
});

事件对象参数

事件处理函数会自动接收事件对象参数，包含事件相关信息：

js实现事件

element.addEventListener('click', (event) => {
  console.log('触发元素:', event.target);
  console.log('鼠标X坐标:', event.clientX);
  event.preventDefault(); // 阻止默认行为
  event.stopPropagation(); // 阻止事件冒泡
});

事件委托实现

通过事件冒泡机制，可以在父元素上统一处理子元素事件：

document.querySelector('ul').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('点击的列表项:', event.target.textContent);
  }
});

自定义事件创建与触发

可以创建和派发自定义事件：

js实现事件

// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
  detail: { message: '自定义数据' },
  bubbles: true
});

// 监听自定义事件
element.addEventListener('myEvent', (e) => {
  console.log(e.detail.message);
});

// 触发事件
element.dispatchEvent(customEvent);

移除事件监听

需要移除事件监听时，必须使用具名函数：

function handleClick() {
  console.log('只执行一次');
  element.removeEventListener('click', handleClick);
}

element.addEventListener('click', handleClick);

事件处理中的this指向

在普通函数中，this指向触发事件的元素；箭头函数中则继承外层上下文：

button.addEventListener('click', function() {
  console.log(this); // 指向button元素
});

button.addEventListener('click', () => {
  console.log(this); // 指向外层上下文（通常是window）
});