JavaScript 事件属性详解：附带 12 个实用示例

JavaScript 事件属性详解：附带 12 个实用示例

事件属性是 JavaScript 中用于处理用户交互的重要机制。它们允许你为特定的 HTML 元素定义在发生特定事件时执行的代码，例如当用户点击按钮、将鼠标悬停在元素上或提交表单时。

本文将介绍一些常用的 JavaScript 事件属性，并提供示例代码来演示它们的用法。

1. onclick 事件：

onclick 事件在用户点击 HTML 元素时触发。javascriptdocument.getElementById('myButton').onclick = function() { alert('按钮被点击了！');};

在这个例子中，当用户点击 id 为 'myButton' 的元素时，会弹出一个提示框显示 '按钮被点击了！'。

2. ondblclick 事件：

ondblclick 事件在用户双击 HTML 元素时触发。javascriptdocument.getElementById('myElement').ondblclick = function() { alert('元素被双击了！');};

3. onmouseover 事件：

onmouseover 事件在用户的鼠标指针悬停在 HTML 元素上时触发。javascriptdocument.getElementById('myElement').onmouseover = function() { this.style.backgroundColor = 'yellow';};

在这个例子中，当用户的鼠标指针悬停在 id 为 'myElement' 的元素上时，该元素的背景颜色会变为黄色。

4. onmouseout 事件：

onmouseout 事件在用户的鼠标指针离开 HTML 元素时触发。javascriptdocument.getElementById('myElement').onmouseout = function() { this.style.backgroundColor = 'white';};

5. onkeyup 事件：

onkeyup 事件在用户释放键盘上的按键时触发。javascriptdocument.getElementById('myInput').onkeyup = function() { console.log('键盘按键抬起了！');};

6. onkeydown 事件：

onkeydown 事件在用户按下键盘上的按键时触发。javascriptdocument.getElementById('myInput').onkeydown = function(event) { console.log('按下的键码是：' + event.keyCode);};

7. onfocus 事件：

onfocus 事件在 HTML 元素获得焦点时触发（例如，当用户点击输入框时）。javascriptdocument.getElementById('myInput').onfocus = function() { this.style.border = '2px solid blue';};

8. onblur 事件：

onblur 事件在 HTML 元素失去焦点时触发。javascriptdocument.getElementById('myInput').onblur = function() { this.style.border = '2px solid red';};

9. onchange 事件：

onchange 事件在 HTML 元素的值发生改变，并且该元素失去焦点时触发。javascriptdocument.getElementById('myInput').onchange = function() { console.log('输入框的值已改变为：' + this.value);};

10. onsubmit 事件：

onsubmit 事件在用户尝试提交 HTML 表单时触发。javascriptdocument.getElementById('myForm').onsubmit = function(event) { event.preventDefault(); // 阻止表单提交 console.log('表单已提交！');};

11. onload 事件：

onload 事件在页面或图像加载完成后触发。javascriptwindow.onload = function() { console.log('页面加载完成！');};

12. onunload 事件：

onunload 事件在用户离开页面时触发。javascriptwindow.onunload = function() { console.log('页面即将被卸载！');};

这些示例展示了如何使用不同的事件属性来添加事件处理程序，你可以根据需要自定义处理函数，以创建动态交互的网页。