第5章 事件处理.ppt

1、第5章 事件处理,5.1事件的基本概念,们将鼠标或键盘在网页对象上的动作称为“事件”，而由鼠标或键盘引发的一连串程序的动作称为“事件驱动”，对事件进行处理的程序或函数称为“事件处理程序”。,5.1.1 什么是事件,事件处理的过程分为3步： 发生事件。 启动事件处理程序。 事件处理程序作出反应。其中，要使事件处理程序能够启动，必须通过指定的对象来调用相应的事件，然后通过该事件调用事件处理程序。事件处理程序可以是任意JavaScript语句，但是我们一般用特定的自定义函数（function）来对事件进行处理。,5.1.2 事件处理程序的调用,在使用事件处理程序对页面进行操作时，最主要的是如何通过对

2、象的事件来指定事件处理程序，其指定方式主要有3种方法 （1）直接在HTML标记中指定 语法： ,（2）指定特定对象的特定事件 语法： /事件处理程序代码 ,（3）在JavaScript中说明 语法： . = ;,5.1.3 JavaScript的相关事件,5.2鼠标键盘事件,单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。 单击事件一般应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象，Button对象一般只会用到onclick事件

3、处理程序，因为该对象不能从用户那里得到任何信息，如果没有onclick事件处理程序，按钮对象将不会有任何作用。,5.2.1 鼠标的单击事件,鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。,5.2.2 鼠标的按下或松开事件,鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在

4、鼠标移出对象上方时触发事件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。,5.2.3 鼠标的移入移出事件,鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。,5.2.4 鼠标移动事件,键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。Onkeyup事件

5、是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。,5.2.5 键盘事件,字母和数字键的键码值,数字键盘上按键的键码值,控制键的键码值,5.3页面相关事件,加载事件（onload）是在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件（unload）是在卸载网页时触发相应的事件处理程序，卸载网页是指关闭当前页或从当前页跳转到其他网页中，该事件常被用于在关闭当前页或跳转其他网页时，弹出询问提示框。,5.3.1 加载与卸载事件,页面的大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，它主要

6、用于固定浏览器的大小。,5.3.2 页面大小事件,5.4表单相关事件,获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。,5.4.1 获得焦点与失去焦点事件,失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。,5.4.2 失去焦点修改事件,表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit）,在表单提交之前被触发，因此，该事件的处理

7、程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。 表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。 下面给出这两个事件的使用格式： formname：表单名称。 Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值。,5.4.3 表单提交与重置事件,5.5滚动字幕事件,onbounce事件是在标记中的内容滚动到上下或左右边界时触发的事件处理程序，该事件只有在标记的behavior属性设为aloernate时才有效。,5.5.1 onbounce事件,on

8、start事件是在标记中的文本开始显示时触发事件处理程序。可以通过该事件在滚动内容显示时，设置其颜色、样式、滚动方向等。,5.5.2 onstart事件,5.6编辑事件,1复制事件 复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处里程序，oncopy事件是在网页中复制内容时触发事件处里程序。,5.6.1 文本编辑事件,2剪切事件 剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序，剪切事件有onbeforecut和oncut两个事件，onbeforec

9、ut事件是当页面中的一部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序，oncut事件是当页面中被选择的内容被剪切时触发事件处理程序。,3粘贴事件 粘贴事件（onbeforepaste）是将内容要从浏览者的系统剪贴板中粘贴到页面上时所触发的事件处理程序。可以利用该事件避免浏览者在添写信息时，对验证信息进行粘贴，如密码文本框和确定密码文本框中的信息。,4选择事件 选择事件是用户在body、input或textarea表单区域中选择文本时触发事件处理程序。选择事件有onselect和onselectstart两个事件。 onselect事件是当文本内容被选择时触发事件处理程序。当使用本事件

10、时，只能在相应的文本中选择一个字符或是一个汉字后触发本事件，并不是用鼠标选择文本后，松开鼠标时触发。,1拖放对象事件 拖放对象事件包含ondrag、ondragend和ondragstart事件。 ondrag事件是当某个对象被拖动时触发事件处理程序。ondragend事件是当鼠标拖动结束时触发事件处理程序，也就是鼠标的按钮被释放时触发该事件。ondragstart事件是当某对象将被拖动时触发事件处理程序，也就是当鼠标按下，开始移动鼠标时触发该事件。,5.6.2 对象拖动事件,2放置目标事件 放置目标事件包含ondragover、ondragenter、ondragleave和ondrop事件。其中ondragover事件是当某个被拖动的对象在另一对象容器范围内拖动时触发事件处理程序。ondragenter事件是当对象被鼠标拖动进入其容器范围内