当前位置：首页 > JavaScript

js event实现

2026-03-14 09:36:58JavaScript

Event 基本概念

JavaScript 中的事件是用户或浏览器与页面交互时触发的动作（如点击、滚动、键盘输入）。通过事件监听和处理器，可以实现交互逻辑。

事件监听方法

1. HTML 属性直接绑定
在 HTML 元素中通过 on[event] 属性直接绑定事件：

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

2. DOM 属性绑定
通过 JavaScript 为 DOM 元素的 on[event] 属性赋值：

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

3. addEventListener
推荐方式，支持多个监听器且更灵活：

js event实现

button.addEventListener('click', function(event) {
  console.log('Event triggered:', event.type);
});

事件对象

事件处理器接收 Event 对象参数，包含事件相关信息：

element.addEventListener('click', function(event) {
  console.log('ClientX:', event.clientX); // 鼠标点击的 X 坐标
  console.log('Target:', event.target);   // 触发事件的元素
});

事件传播机制

事件分三个阶段：

捕获阶段：从 window 向下传播到目标元素。
目标阶段：到达目标元素。
冒泡阶段：从目标元素向上冒泡到 window。

通过 addEventListener 的第三个参数控制监听阶段（默认冒泡阶段）：

js event实现

// 捕获阶段监听
parent.addEventListener('click', () => console.log('Capture'), true);

// 冒泡阶段监听
child.addEventListener('click', () => console.log('Bubble'));

阻止默认行为

调用 event.preventDefault() 阻止默认行为（如链接跳转）：

link.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Link click prevented');
});

阻止事件传播

event.stopPropagation()：阻止事件继续传播（冒泡或捕获）。
event.stopImmediatePropagation()：阻止当前元素的其他监听器执行。

child.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Child click, propagation stopped');
});

事件委托

利用冒泡机制在父元素上监听子元素事件，适合动态内容：

document.querySelector('ul').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('List item clicked:', event.target.textContent);
  }
});

自定义事件

通过 CustomEvent 创建和触发自定义事件：

const event = new CustomEvent('customEvent', { detail: { data: 'Example' } });
element.dispatchEvent(event);

element.addEventListener('customEvent', (e) => {
  console.log('Custom event data:', e.detail.data);
});

常用事件类型

鼠标事件：click, dblclick, mouseover, mouseout
键盘事件：keydown, keyup
表单事件：submit, change, focus
窗口事件：load, resize, scroll

示例代码

// 动态添加按钮事件
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    btn.style.backgroundColor = 'yellow';
  });
  btn.addEventListener('mouseleave', () => {
    btn.style.backgroundColor = '';
  });
});

通过结合事件监听、传播控制和委托机制，可以高效实现复杂的交互逻辑。