4.5.3 事件处理
1.事件概述
客户端JavaScript采用了事件驱动的编程模型,它与Web页面之间的交互是通过用户操作浏览器时触发相关事件来实现的。事件(event)是用户或浏览器自身执行的某种动作,用户与页面的交互以及程序内部的运行都会产生事件。例如,用户敲击键盘、将鼠标移到超链接上或者文档加载完成都是一个事件。
随着Web及其API的发展,事件的集合越来越庞大,可以大致分为以下几类。
·依赖于设备的输入事件:这类事件和特定输入设备相关,如鼠标、键盘,包括“mousemove”“keypress”这类的传统事件类型,以及“touchmove”“gesturechange”这类新的触摸事件类型。
·独立于设备的输入事件:这类事件没有直接关联的输入设备。例如,表示激活按钮、链接等元素的click事件可以通过单击鼠标实现,也可以通过键盘或其他设备实现。
·用户界面事件:通常出现在Web页面的HTML表单元素上,例如改变表单元素显示值的change事件、单击表单提交按钮的submit事件。
·状态变化事件:这类事件由网络或浏览器活动触发,表示相关状态的变化,例如文档加载完成后,产生load事件。
·特定API事件:HTML5及相关规范定义的API都有自己的事件类型。例如拖放API定义的“dragstart”“dragover”等事件,HTML5的video元素定义的“waiting”“playing”事件等。
通常使用一个字符串来描述发生的什么类型的事件,即事件类型,也称事件名,如上面的load是指加载事件、mousemove是指移动鼠标事件、click是指单击事件等。事件目标是与事件相关的对象。
这些事件发生时,就可以编写代码对这些事件做出相应的处理。指定为响应特定事件而应执行的某些动作被称为“事件处理”,相应的函数即为事件处理程序,函数体内包含了响应要执行的步骤。应用程序通过指明事件类型和事件目标,在浏览器中注册事件处理程序。当特定目标上的某类型事件发生时,浏览器会调用对应的处理程序,此时称浏览器“触发”了事件。事件处理程序的名字由“on”单词前缀+事件类型组成,如click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。表4-10列出了基本的事件及其事件处理程序。
表4-10 基本的事件及其事件处理程序
2.事件处理程序的定义
定义事件处理程序有两种基本的方式。一种是将HTML文档元素属性设置为事件处理程序,另一种是将JavaScript对象的属性设置为事件处理程序。
(1)设置HTML文档元素属性
常见的定义事件处理程序的方法是直接绑定到HTML元素的属性上,属性值即为JavaScript的代码字符串。这段代码应是事件处理函数的主体,而不是函数声明。如果属性值包含多条JavaScript语句,可以用分号进行分隔,或者可以将它们定义在一个函数中,通过调用函数去执行这些脚本。基本格式如下:
标签名事件处理程序名=“事件处理程序“[事件处理程序名=“事件处理程序“…]元素内容/标签名
例如,
input type=“but ton“value=“提交“oncl ick=“aler t(确认提交)“/
这句代码为input表单元素指定了onclick属性,并将JavaScript代码作为它的值。当单击这个按钮时,就会执行脚本显示一个警告框。
(2)设置JavaScript对象的属性
可以将事件处理程序绑定到JavaScript对象属性中,也就是将相应的函数赋值给一个对象的事件处理程序属性。每个对象都有自己的事件处理程序属性。要使用这种方式指定事件处理程序,首先必须取得一个要操作的对象的引用,该对象就是触发事件的事件目标,然后给该对象的属性赋值,其值是一个事件处理函数的引用。基本格式如下:
事件目标JavaScr ipt对象.事件处理程序名=事件处理程序;
例如,
上述代码通过文档对象获得了对标题的引用,然后为它指定了事件处理程序属性,其值为事件处理函数。当点击标题时,会弹出警示框。
通过上面两种方法定义事件处理程序时,有时需要使用函数的返回值。通常返回值为false,即告知浏览器不要执行该事件相关的默认操作。例如,表单提交按钮对应的onclick事件处理程序返回false时将阻止浏览器提交表单。当用户输入不合法字符时,输入域的onkeypress事件处理程序也是通过返回false对键盘输入进行校验的。
3.基本事件示例
(1)状态变化事件——文档加载事件
通常Web应用需要浏览器通知文档加载完毕并为操作做好准备。load事件就是为了这个目的,它直到文档和所有图片加载完毕时发生。支持该事件的HTML标签包括:body、frame、frameset、iframe、img、link、script。支持该事件的JavaScript对象有Image、layer、window。在指定事件处理程序时,把它写在上述标签或对象的属性中。
【例4-22】给出了文档加载事件的示例。
【例4-22】文档加载事件示例。
上述代码在body标签中定义了onload属性,属性值为事件处理程序load(),当文档加载完毕后将弹出提示框。运行效果如图4-25所示。
图4-25 文档加载事件的运行效果
(2)依赖于设备输入的事件——鼠标事件
处理鼠标、键盘等设备输入的事件是Web应用中很常见的。click事件会在对象被单击时发生,所谓单击是指在同一元素上按下鼠标并放开,是最常见的事件之一。大多数可显示的HTML标签都支持这一事件,支持该事件的JavaScript对象包括button、document、checkbox、link、radio、reset、submit。下面给出一个用于表单校验的click事件示例。
【例4-23】用于表单校验的click事件示例。
上面的代码定义了一个注册会员的表单,当单击注册按钮时,将调用事件处理程序checkInput()对表单的数据进行校验。checkInput()使用了document对象的getElementById()方法(该方法返回对拥有指定id的第一个对象的引用)按id提取相应元素进行检测,如果不能通过校验,则弹出提示框,阻止程序向下执行。运行效果如图4-26所示。
图4-26 采用onclick事件校验表单的运行效果
mouseover事件发生在鼠标移动到对象范围上方时。鼠标从某对象上移开可以触发mouseout事件。而mousedown和mouseup事件分别发生在鼠标被按下和释放时。多数可显示的HTML标签都支持这些鼠标事件。下面给出一个鼠标事件的示例。
【例4-24】鼠标事件示例。
上面的代码在HTML页面上插入了图像和一段文本。当鼠标放在文本内容上并按下时,触发mousedown事件并调用onmousedown事件处理程序,该代码使用inner HTML()方法重写元素内容“不要将鼠标放到小人的脸上,它会生气”。当鼠标释放时,触发mouseup事件并调用onmouseup事件处理程序,重置文本内容。另外,当鼠标悬停在图像上时,触发mouseover事件,调用angry()事件处理程序,替换图片。鼠标移开后,触发mouseout事件,调用smile()函数重置图片。代码运行效果如图4-27所示,其中第2张图片是将鼠标放在文本内容上并按下时的效果,第3张图片是鼠标悬停在图片上的效果。
图4-27 mouseover、mouseout、mousedown、mouseup事件示例的运行效果
(3)用户界面事件——change、focus事件
通常在界面上与用户交互的基本元素包括表单和超链接。当用户通过输入文字、选择选项或复选框改变表单元素状态时,会触发change事件,通常它会在域的内容改变时发生。支持该事件的HTML标签仅有:input type=“text”、select、textarea。支持该事件的JavaScript对象包括file Upload、select、text、textarea。focus事件在对象获得焦点时发生。多数可显示的HTML标签都支持focus事件。支持它的JavaScript对象则有:button、checkbox、file Upload、layer、frame、password、radio、reset、select、submit、text、textarea、window。下面给出一个包含change和focus事件的示例。
【例4-25】包含change和focus事件的示例。
上面的代码定义了一个文本输入的表单元素,当该元素通过鼠标、键盘获得焦点时,会触发focus事件,调用改变背景颜色的函数changeColor()。它调用document对象的get Element ById()方法获得文本元素,并改变颜色。当文本域内容被修改时,会触发change事件调用alertChange()函数,输出文本被修改的提示框。其运行效果如图4-28所示。
图4-28 change和focus事件示例的运行效果