大家好，欢迎来到IT知识分享网。
一、鼠标事件
鼠标事件是当用鼠标对页面进行一些操作时会触发的事件。
常用方法
每一个都重要
| 事件 | 说明 |
|---|---|
| onclick | 鼠标点击事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
| onmousedown | 鼠标按下事件 |
| onmouseup | 鼠标松开事件 |
| onmousemove | 鼠标移动事件 |
关于onmousedown 和 onmouseup 的使用
function handleMouseDown() {
alert('鼠标按下了按钮！'); } function handleMouseUp() {
alert('鼠标释放了按钮！'); } <button onmousedown="handleMouseDown()" onmouseup="handleMouseUp()">点击我</button> 每次用户按下按钮时，会弹出一个警告框显示“鼠标按下了按钮！”，当用户释放按钮时，会弹出另一个警告框显示“鼠标释放了按钮！”。
注意实际开发中，我们更倾向于使用JavaScript来添加事件监听器，而不是直接在HTML标签中使用事件属性。这样做的好处是可以更灵活地管理事件处理程序，并且可以避免HTML和JavaScript代码的混合，使得代码更加清晰。下面是使用JavaScript添加事件监听器的等效代码：
document.addEventListener('DOMContentLoaded', function() {
var button = document.querySelector('button'); button.addEventListener('mousedown', handleMouseDown); button.addEventListener('mouseup', handleMouseUp); }); function handleMouseDown(event) {
alert('鼠标按下了按钮！'); } function handleMouseUp(event) {
alert('鼠标释放了按钮！'); } 这段代码在文档加载完成后，为按钮添加了 mousedown 和 mouseup 事件监听器
二、键盘事件
常用的键盘事件就只有两个：
onkeydown：键盘按下会触发的事件。onkeyup：键盘松开会触发的事件。
例子：
<script> function handleKeyDown(event) {
// 显示按下的键 document.getElementById('keyStatus').textContent = '按下了键：' + event.key; } function handleKeyUp(event) {
// 显示释放的键 document.getElementById('keyStatus').textContent = '释放了键：' + event.key; } </script> </head> <body> <input type="text" id="inputField" onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)"> <p id="keyStatus"></p> </body> </html> 页面上还有一个 < p > 元素，其 id 为 keyStatus，用于显示按键的状态。当用户按下或释放键时，handleKeyDown 或 handleKeyUp 函数会更新这个元素的文本内容，显示按下或释放的键
使用JavaScript添加事件监听器的等效代码如下：
document.addEventListener('DOMContentLoaded', function() {
var inputField = document.getElementById('inputField'); var keyStatus = document.getElementById('keyStatus'); inputField.addEventListener('keydown', function(event) {
keyStatus.textContent = '按下了键：' + event.key; }); inputField.addEventListener('keyup', function(event) {
keyStatus.textContent = '释放了键：' + event.key; }); }); 这段代码在文档加载完成后，为文本框添加了 keydown 和 keyup 事件监听器，并更新页面上的状态信息。这种方式更加符合现代的JavaScript编程实践，因为它将JavaScript代码与HTML结构分离，使得代码更加清晰和易于维护
三、表单事件
常用表单事件
| 事件 | 说明 |
|---|---|
| onfocus | 表单元素聚焦时触发。 |
| onblur | 表单元素失焦时触发。 |
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Focus and Blur Example</title> <script> function handleFocus() {
alert("输入框已获得焦点！"); } function handleBlur() {
alert("输入框已失去焦点！"); } </script> </head> <body> <p>在下面的输入框中输入文本，然后点击输入框外的区域，看看会发生什么。</p> <input type="text" onfocus="handleFocus()" onblur="handleBlur()" /> </body> </html> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/107906.html
