在JavaScript中，事件（Event）是用户或浏览器自身执行的某种动作（如点击、滚动、加载等）的响应。事件处理是Web开发中非常关键的部分，它允许我们为页面元素添加交互性。下面是一些关于JavaScript事件的基本知识和常用方法整理：
### 1. 事件监听
- **addEventListener() 方法**：用于向指定元素添加事件监听器。
element.addEventListener(event, function, useCapture);
// event: 事件类型（如 'click'）
// function: 当事件发生时执行的函数
// useCapture: 可选参数，布尔值，指定事件是否在捕获或冒泡阶段执行
### 2. 事件对象
- 当事件发生时，会创建一个事件对象，该对象包含了事件的所有信息，如触发事件的元素、事件的类型等。
element.addEventListener('click', function(event) {
console.log(event.type); // 'click'
console.log(event.target); // 被点击的元素
});
### 3. 事件传播
- 事件传播包含两个阶段：捕获阶段和冒泡阶段。
- 默认情况下，事件是从外到内传播（捕获阶段），然后在从内向外传播（冒泡阶段）。
### 4. 阻止默认行为
- 使用 `event.preventDefault()` 方法可以阻止事件的默认行为。
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单提交
// 自定义处理逻辑
});
### 5. 阻止事件冒泡
- 使用 `event.stopPropagation()` 方法可以阻止事件继续冒泡。
document.getElementById('childElement').addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡到父元素
// 处理点击事件
});
### 6. 移除事件监听器
- 使用 `removeEventListener()` 方法可以移除之前通过 `addEventListener()` 添加的事件监听器。
const handler = function() {
console.log('事件被处理');
};
element.addEventListener('click', handler);
// 稍后...
element.removeEventListener('click', handler);
### 7. 常用事件类型
- **鼠标事件**：`click`, `dblclick`, `mouseover`, `mouseout`, `mousemove`, `mousedown`, `mouseup` 等。
- **键盘事件**：`keydown`, `keypress`, `keyup`。
- **表单事件**：`submit`, `change`, `input`。
- **窗口事件**：`load`, `resize`, `scroll`。
### 8. 自定义事件
- 可以使用 `CustomEvent` 构造函数创建并触发自定义事件。
// 创建自定义事件
const myEvent = new CustomEvent('myCustomEvent', {
detail: { message: 'Hello, world!' },
bubbles: true,
cancelable: true
});
// 监听自定义事件
element.addEventListener('myCustomEvent', function(event) {
console.log(event.detail.message); // 'Hello, world!'
});
// 触发自定义事件
element.dispatchEvent(myEvent);
以上就是关于JavaScript事件（Event）的一些基本知识和常用方法的整理。