js事件实现

事件绑定方法

在JavaScript中，事件可以通过多种方式绑定到DOM元素上。常见的方法包括HTML属性、DOM属性以及addEventListener。

HTML属性方式
直接在HTML元素中指定事件处理函数：

<button onclick="handleClick()">Click me</button>

DOM属性方式
通过JavaScript代码为DOM元素的属性赋值：

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

addEventListener方法
推荐使用的方式，可以为一个事件添加多个监听器：

document.getElementById('myButton').addEventListener('click', function() {
  console.log('First handler');
});

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Second handler');
});

事件对象

当事件触发时，浏览器会创建一个事件对象（Event Object），包含与事件相关的属性和方法。

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Event type:', event.type); // 'click'
  console.log('Target element:', event.target); // 触发事件的元素
  console.log('Current element:', event.currentTarget); // 绑定事件的元素
});

事件传播机制

JavaScript事件在DOM树中传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

阻止事件传播
使用stopPropagation方法可以阻止事件继续传播：

document.getElementById('inner').addEventListener('click', function(event) {
  console.log('Inner element clicked');
  event.stopPropagation();
});

阻止默认行为
使用preventDefault方法可以阻止元素的默认行为：

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link click prevented');
});

事件委托

事件委托利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是每个子元素上。

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

自定义事件

JavaScript允许创建和触发自定义事件，实现更灵活的事件机制。

创建和触发自定义事件

// 创建事件
const myEvent = new CustomEvent('myCustomEvent', {
  detail: { message: 'Hello World' },
  bubbles: true,
  cancelable: true
});

// 监听事件
document.getElementById('myElement').addEventListener('myCustomEvent', function(event) {
  console.log('Custom event received:', event.detail.message);
});

// 触发事件
document.getElementById('myElement').dispatchEvent(myEvent);

常见事件类型

JavaScript支持多种事件类型，包括鼠标事件、键盘事件、表单事件等。

鼠标事件

element.addEventListener('mousedown', handleMouseDown);
element.addEventListener('mouseup', handleMouseUp);
element.addEventListener('mousemove', handleMouseMove);

键盘事件

document.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

表单事件

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Form submitted');
});