JavaScript事件处理

### 6.1 添加事件监听
在JavaScript中，事件监听器用于响应用户操作（如点击、输入等）或其他触发事件。你可以使用`addEventListener()`方法给元素添加事件监听器。

```javascript
// 获取元素
const button = document.getElementById('myButton');

// 添加点击事件监听器
button.addEventListener('click', function(event) {
  alert('Button clicked!');
});
```

`addEventListener()`方法接受两个参数：
1. 事件类型（如`click`、`mouseover`、`keydown`等）。
2. 当事件触发时调用的函数（称为事件处理程序）。

### 6.2 事件对象
当事件被触发时，浏览器会创建一个事件对象，它包含了关于事件的详细信息，如事件类型、目标元素、触发事件的时间等。这个对象会自动作为参数传递给事件处理函数。

```javascript
button.addEventListener('click', function(event) {
  console.log(event.type); // 输出: 'click'
  console.log(event.target); // 输出: 被点击的元素
});
```

事件对象提供了许多有用的属性和方法，例如：
- `event.preventDefault()`：阻止事件的默认行为（如链接跳转）。
- `event.stopPropagation()`：阻止事件冒泡到上层元素。
- `event.currentTarget`：当前事件绑定的元素。
- `event.pageX` 和 `event.pageY`：鼠标事件中，鼠标相对于视口的位置。

### 6.3 事件委托
事件委托是一种技术，它利用了事件冒泡的原理。在事件冒泡过程中，当一个事件在DOM树中的某个节点被触发时，它不仅会触发该节点的事件监听器，还会触发祖先节点的事件监听器。

使用事件委托，你可以在父元素上设置一个事件监听器，来监听所有子元素的事件，而不需要在每个子元素上单独设置监听器。这在处理动态生成的元素或大量相似元素时非常有用。

```html
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

```javascript
// 事件委托：在父元素上设置监听器
document.getElementById('myList').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    alert('List item clicked: ' + event.target.textContent);
  }
});
```

在这个例子中，无论点击哪个`<li>`元素，都会触发`#myList`的事件监听器，而不需要为每个`<li>`元素单独设置监听器。

事件处理是JavaScript中实现用户交互的核心部分。通过添加事件监听、使用事件对象和应用事件委托，你可以创建响应用户操作的动态网页。希望这些信息能帮助你更好地理解和使用事件处理。如果你有任何问题或需要进一步的解释，请随时提问。