3.5 事件处理

视频讲解：光盘\TM\lx\3\09事件处理．mp4

通过前面的学习，知道JavaScript可以以事件驱动的方式直接对客户端的输入作出响应，无须经过服务器端程序；也就是说，JavaScript是事件驱动的，它可以使在图形界面环境下的一切操作变得简单化。下面将对事件及事件处理程序进行详细介绍。

3.5.1 什么是事件处理程序

JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload（载入）事件，当用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理。

3.5.2 JavaScript常用事件

多数浏览器内部对象都拥有很多事件，下面将以表格的形式给出常用的事件及何时触发这些事件。JavaScript的常用事件如表3.7所示。

表3.7 JavaScript的常用事件

3.5.3 事件处理程序的调用

在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序。指定方式主要有以下两种。

1．在JavaScript中

在JavaScript中调用事件处理程序，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。

【例3.28】在JavaScript中调用事件处理程序。代码如下：

        <input name="bt_save" type="button" value="保存">
          <script language="javascript">
            var b_save=document.getElementById("bt_save");
            b_save.onclick=function(){
                alert("单击了保存按钮");
            }
          </script>

说明

在页面中加入上面的代码并运行，当单击“保存”按钮时，将弹出“单击了保存按钮”对话框。

注意

在上面的代码中，一定要将“<input name="bt_save" type="button" value="保存">”放在JavaScript代码的上方，否则将弹出“'b_save’为空或不是对象”的错误提示。在JavaScript中指定事件处理程序时，事件名称必须为小写，才能正确响应事件。

2．在HTML中

在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或函数名即可。

【例3.29】在HTML中调用事件处理程序。代码如下：

        <input name="bt_save" type="button" value="保存" onclick="alert(’单击了保存按钮’); ">

说明

在页面中加入上面的代码并运行，当单击“保存”按钮时，将弹出“单击了保存按钮”对话框。