3.3 事件
从前面学习的内容来看，大家已经接触了事件，那么什么是事件呢？事件在JavaScript中的作用是什么呢？
3.3.1 事件概述
事件是指可以被JavaScript侦测到的交互行为，如在网页中滑动、点击鼠标、滚动屏幕、敲击键盘等。当发生事件以后，可以利用JavaScript编程来执行一些特定的代码，从而实现网页的交互效果，它对实现网页的交互效果起着重要的作用。在深入学习事件时，需要对一些非常基本又相当重要的概念有一定的了解。
1．事件处理程序
事件处理程序指的就是JavaScript为响应用户行为所执行的程序代码。例如，用户点击button按钮时，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写程序代码，如在控制台输出“按钮被点击了”。
2．事件驱动式
事件驱动式是指在Web页面中JavaScript的事件，侦测到用户行为（如鼠标点击、鼠标移入等），并执行相应的事件处理程序的过程。
3．事件流
事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。
3.3.2 事件的绑定万式
事件绑定指的是为某个元素对象的事件绑定事件处理程序。在JavaScript中提供了3种事件的绑定方式，分别为行内绑定式、动态绑定式和事件监听的方式。下面将针对以上3种事件绑定方式的语法以及相互之间的区别进行详细讲解。
1．行内绑定式
事件的行内绑定式是通过HTML标签的属性设置实现的，具体语法格式如下：
在上述语法中，标签名可以是任意的HTML标签，如＜div＞标签、＜button＞标签等；事件是由on和事件名称组成的一个HTML属性，如点击事件对应的属性名为onclick；事件的处理程序指的是JavaScript代码，如匿名函数等。
需要注意的是，由于开发中提倡JavaScript代码与HTML代码相分离。因此，不建议使用行内式绑定事件。
2．动态绑定式
动态的绑定方式很好地解决了JavaScript代码与HTML代码混合编写的问题。在JavaScript代码中，为需要事件处理的DOM元素对象添加事件与事件处理程序。具体语法格式如下：
在上述语法中，事件的处理程序一般都是匿名函数或有名的函数。在实际开发中，相对于行内绑定式来说，事件的动态绑定式用得更多一些。行内绑定式与动态绑定式除了实现的语法不同以外，在事件处理程序中关键字this的指向也不同。前者的事件处理程序中的this关键字，用于指向window对象；后者的事件处理程序中的this关键字，用于指向当前正在操作的DOM元素对象。
除此之外，行内绑定式和动态绑定式是最原始的事件模型（也称DOM0级事件模型）提供的事件绑定方式，在该模型中没有事件流的概念，也就是说事件不能够传播。因此，同一个DOM对象的同一个事件只能有一个事件处理程序。
3．事件监听
为了给同一个DOM对象的同一个事件添加多个事件处理程序，在DOM2级事件模型中引入了事件流的概念，可以让DOM对象通过事件监听的方式实现事件的绑定。由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题。通常根据浏览器的内核可以划分为两大类，一类是早期版本的IE浏览器（如IE6～IE8），一类是遵循W3C标准的浏览器（以下简称标准浏览器）。接下来，将根据不同类型的浏览器，分别介绍事件监听的实现方式。
（1）早期版本的IE浏览器
在早期版本的IE浏览器中，事件监昕的语法格式如下：
在上述语法中，参数type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick。参数callback表示事件的处理程序。
（2）标准浏览器
标准浏览器包括IE8版本以上的IE浏览器（如IE9～IE11），新版的Firefox、Chrome等浏览器。具体语法格式如下：
在上述语法中，参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，如click。参数callback表示事件的处理程序。参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。
3.3.3 常见事件
在前面讲解JavaScript引入方式时已经演示过，如何为一个按钮添加点击事件，具体示例如下：
由于在开发中提倡JavaSript代码与HTML代码分离，因此该方法并不推荐。所以在学习对象以后，可以通过元素对象来添加事件，具体示例如下：
上述代码中，通过getElementById()创建元素对象以后，为该对象设置了onclick事件，当JavaScript检测到鼠标点击id为“btn”的按钮时自动执行。在onclick事件中，this表示当前发生事件的元素对象，通过该对象的value属性可以获取元素在HTML中的value属性值。
事件是使用JavaScript实现网页特效的灵魂内容，当与浏览器进行交互的时候浏览器就会触发各种事件，来完成网页中的各种特效，事件的类别有Window事件、Form事件、Keyboard事件、Mouse事件等常用事件，常见事件如表3-12所示。
表3-12 HTML常用事件属性一览表
在JavaScript中事件通常用于处理函数，如前面示例中点击按钮触发的onclick事件调用函数在页面中输出内容、前面示例中加载页面时触发的onload事件，网上注册、登录时，点击按钮时验证输入内容的合法性，在线看视频时通过全屏来观看，这些功能都是通过事件来触发函数实现各种各样炫酷的页面效果的。
【示例18】 改变网页背景色
在前面的例子中大家已了解事件的使用方法，在后面的章节中会时时用到事件，到时会再根据例子说明在实际开发中的不同应用。
3.3.4 技能训练
上机练习6 统计考试科目的成绩
需求说明
➢ 点击按钮调用函数，统计考试成绩。
➢ 使用prompt()方法输入考试科目的数量，要求数量必须是非零、非负数的数值类型，否则给出相应提示并退出程序，如图3.22和图3.23所示。
图3.22 输入不正确的科目数量
图3.23 输入不正确科目数量的提示信息
➢ 根据考试科目的数量，使用prompt()方法输入各科的考试成绩并累加，要求成绩必须是非负数的数值类型，否则给出相应提示并退出程序，如图3.24和图3.25所示。
图3.24 输入不正确成绩后的提示信息
图3.25 输入不正确的成绩
➢ 如果各项输入正确，则弹出总成绩，如图3.26所示。
图3.26 科目总成绩
本章总结
➢ 在JavaScript中，对象类型分为三种：本地对象、内置对象和宿主对象。
➢ 在JavaScript中，常用的对象有Array对象、Number对象、Date对象和对象Object等。
➢ 使用Date对象可以获得当前系统的日期、时间。
➢ 使用定时函数与Date()对象可以制作时钟特效。
➢ setTimeout()用于在指定的毫秒后调用函数或计算表达式。
➢ setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达式。
➢ 事件当与浏览器进行交互的时候浏览器就会触发各种事件，来完成网页中的各种特效，事件的类别有Window事件、Form事件、Keyboard事件、Mouse事件等常用事件。
本章作业
—、选择题
1．下列关于数组的说法错误的是（ ）。
A. 数组是存储一系列值的变量集合
B. 数组元素之间使用逗号（,）分隔
C. 下标可以是整型、字符串型和浮点型
D. 索引下标默认从0依次递增
2．下面关于数组长度的说法中错误的是（ ）。
A. 指定length后，添加的数组元素不能超过这个限制
B. 数组在创建时可以指定数组的长度
C. 若指定的length值小于数组元素个数，则多余的数组元素会被舍弃
D. 若指定的length值大于数组元素个数，则没有值的元素会占用空存储位置
3．如果有函数定义function f(x,y){…}，那么以下正确的函数调用的是（ ）。
A. f1,2
B. f(1)
C. f(1,2)
D. f(,2)
4．定义函数时，在函数名后面的圆括号内可以指定（ ）个参数。
A. 0
B. 1
C. 2
D. 任意
5．函数的参数之间必须用（ ）分隔。
A. 逗号
B. 句号
C. 分号
D. 空格
6．下列关于Date对象的getMonth()方法返回值的描述中，正确的是（ ）。
A. 返回系统时间的当前月
B. 返回值为1～12
C. 返回系统时间的当前月
D. 返回值为0～11
7．setTimeout("adv()",20)表示的意思是（ ）。
A. 间隔20秒后，adv()函数就会被调用
B. 间隔20分钟后，adv()函数就会被调用
C. 间隔20毫秒后，adv()函数就会被调用
D. adv()函数被持续调用20次
8．下面关于函数参数的描述错误的是（ ）。
A. arguments.length可获取用户调用函数时传递的参数数量
B. 函数的参数是外界传递给函数的值
C. 无参函数名后的小括号可以省略
D. arguments对象可获取函数调用时传递的实参
9．当用户点击输入文本框时，会触发（ ）事件。
A. mouseover
B. focus
C. blur
D. mouseout
10．下列事件中，可以在body内所有标签都加载完成后才触发的是（ ）。
A. load
B. click
C. blur
D. focus
二、综合题
1．试举出五种水果的名称，并使用Array数组对象进行存储。
2．请使用Date对象获得今天的年月日。
3．已知有字符串var msg="Merry Chrismas"；请分别解答以下内容。
(1) 试获取字符串长度。
(2) 试获取字符串中的第5个字符。
(3) 试分别使用indexOf()和exec()方法判断字符串中是否包含字母a。
4．试创建一个名称为max(x,y,z)的JavaScript函数，其返回值为x、y、z中的最大值，并使用alert语句显示2、30、99这三个数中的最大值。
5．编写一个函数，求100以内所有奇数的和。
6．编写一个函数，实现获取指定范围内的随机数。
7．使用JavaScript输出如图3.27所示的页面。
提示
➢ 使用document.write()输出水平线。
➢ 使用循环控制每个水平线的长度。
8．使用prompt()方法在页面中弹出提示框，根据用户输入星期一～星期日的不同，弹出不同的信息提示框，要求使用函数实现，具体要求如下：
➢ 输入“星期一”时，弹出“新的一周开始了”。
➢ 输入“星期二”、“星期三”、“星期四”时，弹出“努力工作”。
➢ 输入“星期五”时，弹出“明天就是周末了”。
➢ 输入其他内容，如图3.28所示，弹出“放松的休息”，如图3.29所示。
图3.27 打印倒正金字塔直线
图3.28 输入信息
图3.29 弹出提示框