JavaScript 事件

事件的概念

事件是指用户与网页交互时发生的动作，例如点击鼠标、按下键盘、滚动页面等。JavaScript 可以监听和响应这些事件，从而实现交互性。

常见的事件类型

1. 鼠标事件

• click：鼠标点击元素
• dblclick：鼠标双击元素
• mousedown：鼠标按下元素
• mouseup：鼠标释放元素
• mousemove：鼠标在元素上移动
• mouseenter：鼠标进入元素
• mouseleave：鼠标离开元素
• mouseover：鼠标悬停在元素上
• mouseout：鼠标离开元素

2. 键盘事件

• keydown：按下键盘按键
• keyup：释放键盘按键
• keypress：按下并释放键盘按键（已废弃）

3. 表单事件

• submit：提交表单
• reset：重置表单
• change：表单元素的值改变
• input：表单元素的输入
• focus：表单元素获得焦点
• blur：表单元素失去焦点

4. 窗口事件

• load：页面加载完成
• unload：页面卸载
• resize：窗口大小改变
• scroll：页面滚动
• DOMContentLoaded：DOM 加载完成

5. 触摸事件

• touchstart：触摸开始
• touchmove：触摸移动
• touchend：触摸结束
• touchcancel：触摸取消

事件处理的方法

1. HTML 事件属性

在 HTML 元素中直接添加事件属性：

<button onclick="alert('Hello, World!')">点击我</button>
<input type="text" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">

2. DOM 属性

通过 JavaScript 为 DOM 元素添加事件处理函数：

const button = document.getElementById('myButton');
button.onclick = function() {
  alert('Hello, World!');
};

// 移除事件处理函数
button.onclick = null;

3. addEventListener() 方法

使用 addEventListener() 方法添加事件监听器：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Hello, World!');
});

// 添加多个事件监听器
button.addEventListener('click', function() {
  console.log('Button clicked');
});

// 移除事件监听器（需要引用同一个函数）
function handleClick() {
  alert('Hello, World!');
}

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

事件对象

当事件发生时，浏览器会创建一个事件对象，包含事件的详细信息：

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log('Event type:', event.type); // 输出: click
  console.log('Target element:', event.target); // 输出: 按钮元素
  console.log('Client X:', event.clientX); // 输出: 鼠标点击的 X 坐标
  console.log('Client Y:', event.clientY); // 输出: 鼠标点击的 Y 坐标
});

事件冒泡和捕获

1. 事件冒泡

事件冒泡是指事件从目标元素开始，向上传播到父元素：

<div id="outer">
  <div id="inner">
    <button id="button">点击我</button>
  </div>
</div>

document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
});

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

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
});

// 点击按钮时的输出顺序：
// Button clicked
// Inner div clicked
// Outer div clicked

2. 事件捕获

事件捕获是指事件从父元素开始，向下传播到目标元素：

document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
}, true); // useCapture 参数设为 true

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner div clicked');
}, true);

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
}, true);

// 点击按钮时的输出顺序：
// Outer div clicked
// Inner div clicked
// Button clicked

阻止事件传播

使用 stopPropagation() 方法阻止事件传播：

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡
});

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

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
});

// 点击按钮时的输出：
// Button clicked
// 不会输出 "Inner div clicked" 和 "Outer div clicked"

阻止默认行为

使用 preventDefault() 方法阻止事件的默认行为：

const link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  console.log('Link clicked, but not navigated');
});

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  console.log('Form submitted, but not sent');
});

事件委托

事件委托是指将事件监听器添加到父元素，而不是每个子元素，利用事件冒泡来处理子元素的事件：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

const list = document.getElementById('myList');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('List item clicked:', event.target.textContent);
  }
});

自定义事件

使用 CustomEvent 构造函数创建自定义事件：

// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
  detail: {
    message: 'Hello, Custom Event!',
    time: new Date()
  },
  bubbles: true,
  cancelable: true
});

// 添加事件监听器
const element = document.getElementById('myElement');
element.addEventListener('myEvent', function(event) {
  console.log('Custom event triggered:', event.detail.message);
  console.log('Event time:', event.detail.time);
});

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

事件处理的最佳实践

1. 使用 addEventListener()

使用 addEventListener() 方法而不是 HTML 事件属性或 DOM 属性，因为它允许添加多个事件监听器，并且可以更灵活地控制事件处理。

2. 移除不需要的事件监听器

当不再需要事件监听器时，使用 removeEventListener() 方法移除它，以避免内存泄漏。

3. 使用事件委托

对于多个相似的元素，使用事件委托可以减少事件监听器的数量，提高性能。

4. 合理使用事件冒泡和捕获

根据需要选择事件冒泡或捕获模式，以实现所需的事件处理逻辑。

5. 优化事件处理函数

事件处理函数应该简洁高效，避免在其中执行复杂的操作，以提高页面响应速度。

6. 使用 passive 事件监听器

对于滚动等事件，使用 passive 事件监听器可以提高性能：

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

小结

事件是 JavaScript 实现交互性的核心机制。通过监听和响应各种事件，JavaScript 可以使网页变得更加动态和用户友好。理解事件的类型、处理方法和最佳实践，是学习 JavaScript 的重要组成部分。