JavaScript中常用事件有哪些？

绝地灬酷狼 2024-03-24 17:30 80阅读 0赞

JavaScript是基于对象的脚本语言，它的一个最基本的特征就是采用事件鼎动。如，当鼠标指针经过某个按钮或者用户在文本框中输入某些信息时，都可以设置相应的JavaScript事件来完成某些特殊效果。下面，将对JavaScript中的常用事件进行详细讲解。

## 1.鼠标事件 ##

鼠标事件是指通过鼠标动作触发的事件，鼠标事件有很多，下面列举几个常用的鼠标事件，如表所示。

<table> 
 <tbody> 
 <tr> 
 <td> 类别 </td> 
 <td> 事件 </td> 
 <td> 事件说明 </td> 
 </tr> 
 <tr> 
 <td> 鼠标事件 </td> 
 <td> onclick </td> 
 <td> 鼠标单击时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> ondblclick </td> 
 <td> 鼠标双击时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onmousedown </td> 
 <td> 鼠标按下时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onmouseup </td> 
 <td> 鼠标弹起时触发的事件 </td> 
 </tr> 
 <tr> 
 <td> onmouseover </td> 
 <td> 鼠标移动到某个设置了此事件的元素上时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onmousemove </td> 
 <td> 鼠标移动时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onmouseout </td> 
 <td> 鼠标从某个设置了此事件的元素上离开时触发此事件 </td> 
 </tr> 
 </tbody> 
</table>

## 2.键盘事件 ##

键盘事件是指用户在使用键盘时触发的事件。例如，用户按【Esc】键关闭打开的状态栏，按【Enter】键直接完成光标的上下切换等。下面列举几个常用的键盘事件，如表15-16所示。

表15-16 JavaScript中常用的键盘事件

<table> 
 <tbody> 
 <tr> 
 <td> 类别 </td> 
 <td> 事件 </td> 
 <td> 事件说明 </td> 
 </tr> 
 <tr> 
 <td> 键盘事件 </td> 
 <td> onkeydown </td> 
 <td> 当键盘上的某个按键被按下时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onkeyup </td> 
 <td> 当键盘上的某个按键被按下后弹起时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onkeypress </td> 
 <td> 当输入有效的字符按键时触发此事件 </td> 
 </tr> 
 </tbody> 
</table>

## 3.表单事件 ##

表单事件是指对Web表单操作时发生的事件。例如，表单提交前对表单的验证，表单重置时的确认操作等。下面列举几个常用的表单事件，如表15-17所示。

表15-17 JavaScript中常用的表单事件

<table> 
 <tbody> 
 <tr> 
 <td> 类别 </td> 
 <td> 事件 </td> 
 <td> 事件说明 </td> 
 </tr> 
 <tr> 
 <td> 表单事件 </td> 
 <td> onblur </td> 
 <td> 当前元素失去焦点时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onchange </td> 
 <td> 当前元素失去焦点并且元素内容发生改变时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onfocus </td> 
 <td> 当某个元素获得焦点时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onreset </td> 
 <td> 当表单被重置时触发此事件 </td> 
 </tr> 
 <tr> 
 <td> onsubmit </td> 
 <td> 当表单被提交时触发此事件 </td> 
 </tr> 
 </tbody> 
</table>

## 4.页面事件 ##

在项目开发中，经常需要JavaScript对网页中的DOM元素进行操作，而页面的加载又是按照代码的编写顺序，从上到下依次执行的。因此，若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误，例如下面的示例代码：

在上述代码中，第2行代码利用getElementByldO获取id为demo的元素，并为其添加击”弹框;第6行代码定义了一个用于单击的按钮。当用户单击按钮时，页面就会弹出一个提示框。