事件处理和JavaScript事件处理函数

事件处理是对象化编程一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件，启动事件处理程序，事件处理程序做出反应。事件处理程序可以是任意JavaScript语句，一般用自定义函数来实现。

JavaScript事件是由访问Web页面的用户引起的一系列操作，如鼠标的移动、键盘的输入、当前页面的关闭等。当用户执行某些操作的时候，再去执行一系列代码。

事件一般是用于浏览器和用户操作进行交互。最早是在IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段，直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件，IE 、 Firefox 、 Opera、 Safari和Chrome全都已经实现了“DOM二级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。

事件处理器是与特定的事件相联系的JavaScript脚本代码，当事件被触发时，浏览器执行该代码并进行相应的处理操作。响应某个事件而进行的处理过程称为事件处理。

JavaScript可以处理的事件类型有鼠标事件、键盘事件、HTML事件。JavaScript事件处理函数如表1-20所示。

表1-20　JavaScript事件处理函数及其使用列表

续表

注意：所有的事件处理函数都由两个部分组成，即on+事件名称，如click事件的事件处理函数就是onclick 。

对于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效。

9.1　鼠标事件

页面所有元素都可触发鼠标事件。鼠标事件的类型有：

（1） click：当用户单击鼠标按钮或按下回车键时触发。

（2） dblclick：当用户双击主鼠标按钮时触发。

（3） mousedown：当用户按下了鼠标还未弹起时触发。

（4） mouseup：当用户释放鼠标按钮时触发。

（5 ） mouseover：当鼠标移到某个元素上方时触发。

（6） mouseout：当鼠标移出某个元素上方时触发。

（7） mousemove：当鼠标指针在元素上移动时触发。

9.2　键盘事件

键盘事件的类型有：

（1） keydown：当用户按下键盘上的任意键时触发，如果按住不放，会重复触发。

（2） keypress：当用户按下键盘上的字符键时触发，如果按住不放，会重复触发。

（3） keyup：当用户释放键盘上的键时触发。

9.3　HTML事件

HTML事件的类型有：

（1） load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发。(www.xing528.com)

（2） unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。

（3） select：当用户选择文本框（input或textarea）中的一个或多个字符时触发。

（4） change：当文本框（input或textarea）内容改变且失去焦点后触发。

（5） focus：当页面或者元素获得焦点时在window及相关元素上面触发。

（6） blur：当页面或元素失去焦点时在window及相关元素上触发。

（7） submit：当用户点击提交按钮在<form>元素上触发。

（8） reset：当用户点击重置按钮在<form>元素上触发。

（9） resize：当窗口或框架的大小变化时在window或框架上触发。

（10） scroll：当用户滚动带滚动条的元素时触发。

9.4　示例

网页在浏览器中打开后如图1-11所示，单击“改变背景色”按钮后，如图1-12所示。

图1-11　打开后的网页

图1-12　改变背景色后的网页

任务实现：

任务解析：

在本例中，单击网页中的“改变背景色”按钮，执行changeColor （ ）函数。在changeColor （ ）函数中，使用document对象的bgColor属性设置网页的背景色为“绿色”，调用getElementById （ ）方法找到id为“p1”的元素，innerHTML属性用于设置元素的文本内容。

习题

1.完成一个页面，使用Javascript实现判断一个整数n是否是一个能被17整除的三位偶数的功能，网页效果如下图所示。

图1-13　输入提示框

图1-14　判断结果框

2.完成一个页面，使用Javascript实现冒泡排序算法。（基本思路是将要排序的数字放在一个数组中，并将数组中相邻的两个元素进行比较，将数据小的数字放在数组的前面）

3.在窗体中有两个多选列表，编写程序，使用户可以从左侧列表中选择任意项添加到右侧列表中，反之亦然。