js_events_examples

现代 JavaScript HTML DOM 事件处理

事件是在浏览器中发生的动作，例如用户点击按钮、文本输入到输入字段或页面加载完成。JavaScript 允许你“监听”这些事件并执行代码作为响应，使网页具有交互性。

处理事件的现代且推荐的方式是使用 addEventListener() 方法。此方法允许你将一个或多个事件处理函数附加到 HTML 元素上，而无需直接修改 HTML 属性。

addEventListener() 的主要优点：

• 允许为同一个事件添加多个处理程序。
• 提供了对事件处理阶段（捕获与冒泡）的更多控制。
• 使用 removeEventListener() 更容易移除事件监听器。
• 将 JavaScript 逻辑与 HTML 结构分离，从而使代码更整洁。

基本语法：element.addEventListener(event_type, handler_function, useCapture);

常见输入事件示例

输入事件是由用户与表单元素的交互触发的。

blur：当元素失去焦点时触发（例如，用户点击输入字段外部）。

change：当用户提交了诸如 <input>、<select> 或 <textarea> 元素的值时触发。对于文本输入框和文本区域，这通常发生在元素失去焦点且其值被更改后。对于选择框、单选按钮和复选框，它在选择改变时立即触发。

input：当 <input>、<select> 或 <textarea> 元素的值改变时同步触发。由于它能在用户输入时提供实时反馈，因此通常比 change 更受欢迎。

focus：当元素获得焦点时触发（例如，用户点击或使用 Tab 键切换到输入字段）。

select：当在 <input> 或 <textarea> 中选择了一些文本时触发。

submit：当表单被提交时触发（通常是点击提交按钮或在字段中按 Enter 键）。请在 <form> 元素本身上处理此事件。

reset：当表单的重置按钮被点击时触发。请在 <form> 元素上处理此事件。

keydown：当按下键盘上的键时触发。

keypress：（很大程度上已弃用，请考虑使用 keydown 或 input）当按下产生字符值的键时触发。

keyup：当释放键盘上的键时触发。

事件对象：在事件处理函数内部，会自动将一个 event 对象作为第一个参数传递。该对象包含有关事件的重要信息，例如 event.target（触发事件的元素）、event.key（用于键盘事件）、event.preventDefault()（阻止浏览器的默认行为）和 event.stopPropagation()（阻止事件冒泡）。

鼠标事件示例

鼠标事件是由用户通过鼠标或类似指向设备进行交互时触发的。

mouseover / mouseout：mouseover 在指针移动到元素或其子元素上时触发。mouseout 在指针移出元素或其子元素时触发。这些事件会冒泡。

mouseenter / mouseleave：类似于 mouseover / mouseout，但 mouseenter 和 mouseleave 不会冒泡，在处理嵌套元素时通常因其简洁性而更受欢迎。

mousedown / mouseup：mousedown 在鼠标按钮在元素上按下时触发。mouseup 在鼠标按钮在元素上释放时触发。

mousemove：当鼠标指针在元素上移动时持续触发。

点击事件示例

click：当指向设备按钮（通常是主按钮）在单个元素上按下并释放时触发。

dblclick：当指向设备按钮在单个元素上快速点击两次时触发。

contextmenu：当点击鼠标右键（或等效操作）以打开上下文菜单时触发。

加载和窗口事件示例

load：在资源（如图片、脚本或 window 本身）及其所有依赖资源加载完成后触发。

DOMContentLoaded：当初始 HTML 文档完全加载和解析完成后，无需等待样式表、图片和子框架完成加载时在 document 上触发。为了更快的脚本执行，通常推荐使用它而不是 window.onload。

error：当资源（例如，图片或脚本）加载失败时触发。

unload / beforeunload：beforeunload 在窗口、文档及其资源即将卸载时触发。它可用于提示用户是否要离开页面。unload 在文档正在卸载时触发。由于用户体验原因，它们的用法有时受到浏览器的限制。

resize：当浏览器窗口大小被调整时在 window 上触发。

scroll：当文档视图或元素被滚动时触发。可以附加到 window 或可滚动元素上。

进一步探索：事件属性

理解 event 对象的属性是进行有效事件处理的关键：

按下的键（例如，event.key、event.code）：对于键盘事件非常有用，用于确定按下了哪个键。

光标坐标（例如，event.clientX、event.clientY、event.pageX、event.pageY）：提供鼠标指针相对于视口或文档的位置。

修饰键（例如，event.shiftKey、event.altKey、event.ctrlKey、event.metaKey）：检查事件发生期间是否按下了修饰键。

事件类型（event.type）：一个字符串，指示发生了哪种类型的事件（例如，“click”、“mouseover”）。

这些示例提供了一个起点。实际应用中通常涉及更复杂的事件处理，包括事件委托、自定义事件以及与异步操作的交互。