JavaScript 事件

HTML 事件（HTML events）是指发生在 HTML 元素上的“事情”，例如鼠标点击、按键或页面加载完成。JavaScript 允许你对这些事件做出“反应”并执行相应的代码。

理解 HTML 事件

HTML 事件可以由浏览器行为（例如页面加载）或用户交互（例如点击按钮）触发。

以下是一些 HTML 事件的示例：

HTML 网页加载完成（load 事件）。
HTML 输入字段的值被改变（change 事件）。
HTML 按钮被点击（click 事件）。
在键盘上按下一个键（keydown 事件）。

当事件发生时，你通常希望执行某个动作。JavaScript 提供了检测这些事件并运行特定代码的机制，这些代码被称为事件处理程序（event handlers）或事件监听器（event listeners）。

现代方法：`addEventListener()`

在现代 JavaScript 中处理事件的推荐方法是使用 addEventListener() 方法。此方法将一个事件处理函数（event handler function）附加到 HTML 元素上，而不会覆盖现有的事件处理程序。

使用 addEventListener() 的示例：

// HTML: <button id="myButton">Click Me</button>
// JS:
const myButton = document.getElementById('myButton');

function showTime() {
  document.getElementById('timeDisplay').textContent = new Date().toLocaleTimeString();
}

myButton.addEventListener('click', showTime);

这种方法促进了关注点分离（HTML 结构与 JavaScript 行为），并提供了更大的灵活性（例如，为同一事件添加多个监听器）。

旧方法（不推荐）

虽然仍然可用，但像内联事件处理程序属性（inline event handler attributes）和 on<event> 属性这样的旧方法通常不建议用于新的开发。

内联事件处理程序属性：

HTML 允许直接在 HTML 元素内部使用事件处理程序属性：

或者调用一个全局定义的函数：

<!-- HTML -->
<button onclick="displayDate()">What time is it?</button>
<p id="demo"></p>

<!-- JavaScript (must be global or accessible) -->
<script>
  function displayDate() {
    document.getElementById('demo').innerHTML = Date();
  }
</script>

on<event> 属性：

JavaScript 可以将函数赋值给元素的 on<event> 属性：

// HTML: <button id="anotherButton">Show Date</button>
// JS:
const_anotherButton = document.getElementById('anotherButton');
_anotherButton.onclick = function() {
  document.getElementById('dateDisplay').textContent = new Date().toLocaleDateString();
};
// Note: This would overwrite any previous onclick handler on _anotherButton.

	对于现代开发，`addEventListener()` 是首选，因为它具有灵活性、能够添加多个监听器，并能更好地控制事件处理过程（例如，捕获 vs 冒泡）。

常见 HTML 事件

以下是一些常见的 HTML 事件列表：

事件类型（用于 addEventListener）	描述
`click`	用户点击一个 HTML 元素。
`dblclick`	用户双击一个 HTML 元素。
`mousedown`	鼠标按钮在元素上按下。
`mouseup`	鼠标按钮在元素上释放。
`mousemove`	鼠标指针在元素上移动。
`mouseover`	鼠标指针移动到元素或其子元素上。
`mouseout`	鼠标指针移出元素或其子元素。
`keydown`	按键按下。
`keyup`	按键释放。
`keypress`	按下产生字符值的键（部分浏览器已弃用，推荐使用 `keydown`）。
`focus`	元素获得焦点。
`blur`	元素失去焦点。
`change`	input, select 或 textarea 元素的值已更改。
`input`	input 或 textarea 元素的值正在更改（立即触发）。
`submit`	表单被提交。
`load`	资源（如页面、图像或脚本）加载完成。
`unload`	页面正在卸载（用户导航离开）。
`resize`	浏览器窗口大小已更改。

此列表并非详尽无遗。有关完整的列表，请参阅 MDN Web Docs 上的事件参考（Event reference）。

JavaScript 能用事件做什么？

事件处理程序能够实现广泛的交互功能：

在页面加载时执行操作（例如，获取数据、初始化组件）。
在页面关闭或导航离开时执行清理任务。
响应用户操作，如按钮点击、鼠标移动或按键。
动态验证表单中的用户输入。
创建交互式菜单、滑块和其他 UI 组件。
以及更多…

addEventListener() 方法是 JavaScript 处理事件最强大的方式，它提供了对事件处理方式的控制，并允许 JavaScript 逻辑与 HTML 标记清晰地分离。

	你将在随后的 HTML DOM 章节中了解更多关于事件、事件对象（event objects）和高级事件处理技术（如事件委托，event delegation）的信息。

JavaScript 事件

JavaScript 事件

理解 HTML 事件

现代方法：addEventListener()

旧方法（不推荐）

常见 HTML 事件

JavaScript 能用事件做什么？

现代方法：`addEventListener()`