JavaScript 学习笔记（十五）-- 事件（上）

目录

• 引言
• 事件类型
• 事件对象
• 事件处理程序
• 事件冒泡和事件捕获
• 事件委托
• 键盘事件
• 鼠标事件
• 表单事件
• 总结

引言

事件是当用户或系统与网页交互时发生的。JavaScript 可以通过事件处理程序来响应这些事件。JavaScript 中有许多不同的事件类型，如点击事件、鼠标移动事件、键盘事件、表单事件等。事件对象包含有关事件的信息，如事件类型、事件目标、事件发生的元素等。事件冒泡和事件捕获是两种不同的事件处理机制。事件委托是一种用于简化事件处理的技巧。

事件类型

JavaScript 中有许多不同的事件类型，每种事件类型都对应着一种特定的用户或系统交互。一些常见的事件类型包括：

• 点击事件（click）：当用户单击鼠标时发生。
• 双击事件（dblclick）：当用户连续快速单击鼠标两次时发生。
• 鼠标移动事件（mousemove）：当用户移动鼠标时发生。
• 鼠标按下事件（mousedown）：当用户按下鼠标按钮时发生。
• 鼠标松开事件（mouseup）：当用户松开鼠标按钮时发生。
• 键盘按下事件（keydown）：当用户按下键盘上的某个键时发生。
• 键盘抬起事件（keyup）：当用户松开键盘上的某个键时发生。
• 滚动事件（scroll）：当用户滚动页面时发生。
• 加载事件（load）：当页面加载完成时发生。
• 卸载事件（unload）：当页面卸载时发生。

事件对象

事件对象包含有关事件的信息，如事件类型、事件目标、事件发生的元素等。事件对象的属性包括：

• type：事件类型，如“click”、“mousemove”、“keydown”等。
• target：事件目标，即触发事件的元素。
• currentTarget：当前事件目标，即事件处理程序所在的元素。
• relatedTarget：相关目标，即与当前事件目标相关的元素。
• button：鼠标事件中，表示哪个鼠标按钮被按下。
• buttons：鼠标事件中，表示哪些鼠标按钮被按下。
• keyCode：键盘事件中，表示哪个键盘键被按下。
• charCode：键盘事件中，表示哪个键盘字符被输入。
• altKey：键盘事件中，表示是否按下了 Alt 键。
• ctrlKey：键盘事件中，表示是否按下了 Ctrl 键。
• shiftKey：键盘事件中，表示是否按下了 Shift 键。

事件处理程序

事件处理程序是 JavaScript 代码，用于响应事件。事件处理程序可以是函数或内联代码。事件处理程序可以附加到元素上，以便在事件发生时触发。

附加事件处理程序的语法如下：

element.addEventListener(event_type, event_handler, useCapture);

• element：要附加事件处理程序的元素。
• event_type：事件类型，如“click”、“mousemove”、“keydown”等。
• event_handler：事件处理程序，可以是函数或内联代码。
• useCapture：布尔值，表示是否使用捕获机制。

事件冒泡和事件捕获

事件冒泡和事件捕获是两种不同的事件处理机制。事件冒泡是默认的事件处理机制。在事件冒泡中，事件从触发事件的元素开始，然后向上冒泡到父元素、祖父元素，依此类推，直到到达文档根元素。

事件捕获是一种可选的事件处理机制。在事件捕获中，事件从文档根元素开始，然后向下捕获到子元素、孙子元素，依此类推，直到到达触发事件的元素。

事件捕获可以通过在附加事件处理程序时将 useCapture 参数设置为 true 来启用。

事件委托

事件委托是一种用于简化事件处理的技巧。事件委托を利用すると、イベントハンドラを親要素に追加して、親要素とその子孫要素の両方で発生するイベントを処理できるようになります。

事件委托の仕組みは次のとおりです。

1. 親要素にイベントハンドラを追加します。
2. イベントハンドラの中で、イベントが発生した要素を特定します。
3. 特定した要素に応じて、適切な処理を行います。

事件委托を使用すると、イベントハンドラを個々の要素に追加する必要がなくなるため、コードを簡潔に保つことができます。

键盘事件

键盘事件是当用户按下或松开键盘上的某个键时发生的事件。键盘事件的类型包括：

• keydown：当用户按下键盘上的某个键时发生。
• keyup：当用户松开键盘上的某个键时发生。

键盘事件的对象包含有关事件的信息，如事件类型、事件目标、键盘键的代码、是否按下了 Alt 键、Ctrl 键或 Shift 键等。

鼠标事件

鼠标事件是当用户移动、按下或松开鼠标按钮时发生的事件。鼠标事件的类型包括：

• click：当用户单击鼠标时发生。
• dblclick：当用户连续快速单击鼠标两次时发生。
• mousedown：当用户按下鼠标按钮时发生。
• mouseup：当用户松开鼠标按钮时发生。
• mousemove：当用户移动鼠标时发生。

鼠标事件的对象包含有关事件的信息，如事件类型、事件目标、鼠标按钮、是否按下了 Alt 键、Ctrl 键或 Shift 键等。

表单事件

表单事件是当用户与表单元素交互时发生的事件。表单事件的类型包括：

• submit：当用户提交表单时发生。
• reset：当用户重置表单时发生。
• change：当用户更改表单元素的值时发生。

表单事件的对象包含有关事件的信息，如事件类型、事件目标、表单元素的值等。

总结

事件是 JavaScript 中一个重要的概念。通过理解事件及其处理机制，您可以构建更加动态和交互性的网页应用程序。