
1.7.2 JavaScript事件
每个网页由对象和元素组成。一些常见的元素是按钮、链接、复选框、单选按钮和表单的其他部分。每种元素有一些能触发JavaScript的事件,而事件是JavaScript能够检测的动作。前面例子已经使用过两个事件:onclick事件和onload事件。
事件驱动程序设计
因为事件在网页中出现,所以我们定义事件出现后会发生什么事情。实际上就是“当这个事件出现时就处理它”。有时因事件而发生的事情很简单,但有时事件可能引起一些复杂的程序设计。通常事件与函数结合,也就是当一个事件发生时,将调用一个函数。在事件发生之前,这个函数永远不会执行,这称为事件驱动程序设计。
事件被看做是元素的属性,用于定义该元素出现这个事件后会发生什么事情。下面是常见的事件:
·单击鼠标
·网页或图像载入
·滚动鼠标滑过网页上的链接、图像或其他热点
·在表单上选择一个元素或字段
表1-6列出了一些常见事件及其触发动作。
表1-6 常见事件及其触发动作
使用事件的一般语法如下:
例1.22示范了一个引起事件发生的触发动作(即用户单击一个按钮)的使用,它显示一个提示对话框。
例1.22 使用提示对话框和事件问候用户 下列代码提示用户输入一个名字,然后在网页上改变问候文本以便包含用户的名字。
最初,这个页面有一行文字和一个按钮,看起来像这样:
当单击这个按钮时,第14行调用起始于第5行的函数greet(),这个函数创建变量name并将它赋值为一个提示对话框(第7行)的内容。然后,第8行使用write()方法在网页上显示一条新信息,注意点标记用于将信息放置在网页文档上。稍后我们将会学习如何把内容放在网页的其他区域,而现在只使用最一般的区域,即document对象。注意显示的内容有文本和变量的值,其第一块文本“Hello”放在引号内。任何HTML格式的代码也放在引号内。对于这个例子,我们想要这个文本成为二级标题,因此包括开始标签<h2>。加号(+)意味着这个文本后面跟有变量name的值,然后通过使用另一个加号并用另一对引号括起的文本添加这个文本的其他部分“!How are you today?”。我们也把强制换行(<br/>)放入引号内。因为一个开始标签<h2>需要一个结束标签,所以结束标签</h2>放在第二块文本的末端,并且仍然在引号内。
如果用户单击该按钮,在提示中输入Helmut Lindstrom,然后单击OK按钮,那么页面将会看起来像这样:
1.7节检查点
1.29 函数是什么?
1.30 定义一个函数warning(),将下面一行文本以3级标题格式显示到网页的document对象中。
1.31 参数是什么?
1.32 识别出以下代码中的参数:
1.33 通过添加一个新事件改写例1.22的代码。如果用户双击按钮,生成下列信息: