第11章-事件响应

1、第11章 事件响应事件的概念常用的事件分析event对象的应用本章主要内容：11.1 事件响应编程简介事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理 11.1.1 事件和事件处理程序事件的发生与HTML文档的载入进度无关，一般来说，网页载入后会发生多种事件，用户在操作页面元素时也会发生多种事件，触发事件后执行一定的程序就是JavaScript事件响应编程的常用模式。只有在触发事件后才处理的程序被称为事件处理程序，事件响应的过程可以表示为三个步骤，即发生事

2、件启动事件处理程序事件响应程序做出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生什么事情，就要启动什么处理程序，否则这个流程就不能进行下去。11.1.1 事件和事件处理程序事件的处理程序可以是任意JavaScript语句，但一般使用特定的自定义函数（function）来处理，这种函数可以传递很多参数，比较常用的是传递this参数，this代表HTML标签的相应对象，其编写方法如下：要让浏览器可以调用合适的JavaScript程序，必须先设置HTML文档中响应事件的元素，再设置元素响应事件的类型，最后设置响应事件的程序。事件处理程序并不写在中，而是写在能触发该事件的HTML标签属

3、性中，编写方法如下：11.1.2 HTML文档事件HTML文档事件是指用户从载入目标页面开始直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。 1.事件捆绑：HTML文档将元素的常用事件当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。2.浏览器事件：浏览器事件指从载入文档到该文档被关闭期间的浏览器事件。3.HTML元素事件：页面载入后，用户与页面的交互主要指发生在如按钮、链接、表单、图片等HTML元素上的用户动作以及该页面对此动作所作出的响应。 11.1.3 JavaScript如何处理事件JavaScript脚本

4、处理事件主要可通过匿名函数、显式声明、手工触发等方式进行，这几种方法在隔离HTML文本结构与逻辑关系的程度方面略为不同。（1）匿名函数：匿名函数的方式即使用Function对象构造匿名的函数，并将其方法复制给事件，此时该匿名的函数成为该事件的事件处理器。（2）显式声明：即在设置事件处理器时，不使用匿名函数，而是将该事件的处理器设置为已经存在的函数。（3）手工触发：手工触发事件的原理相当简单，就是通过其他元素的方法来触发一个事件而不需要通过用户的动作来触发该事件。11.2 主要事件分析JavaScript是一门脚本语言，也是一门基于对象的编程语言，虽然没有专业面向对象编程语言那样规范的类的继承、

5、封装等，但它和面向对象的编程一样必须要有事件的驱动，才能执行程序。JavaScript提供了很多的事件，如鼠标单击（onClick）、文本框内容的改变（onChange）等，11.2.1 鼠标事件鼠标事件是在JavaScript页面操作中使用最频繁的事件，利用鼠标事件可以实现一些特殊的单击和移动效果，一般用于图像（Image）、链接（Link）、各类按钮（Radio、Button、Checkbox）等对象。11.2.2 键盘事件键盘事件是在网页操作中使用最频繁的事件，利用键盘事件可以实现页面的快捷操作。键盘常见的事件有onkeyup、onkeydown、onkeypress 11.2.3 表单

6、事件表单事件主要是对元素获得或失去焦点的动作进行控制，如获得焦点事件（onfocus）是当某个元素获得焦点时触发的事件，失去焦点事件（onBlur）是当某个元素失去焦点时触发的事件，在通常情况下，它们是同时结合使用的。而失去焦点修改事件（onChange）是当前元素失去焦点并且元素的内容发生改变时触发的事件，还有文本选中事件（onSelect）在当文本框或文本域中的内容被选中时触发。11.3 event对象event的中文意思即为事件，在JavaScript中它代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态等。一旦在HTML文档中触发了某个事件，即会生成event对象，如单击

7、一个按钮，浏览器的内存中就产生相应的 event对象。11.3.1 event对象的属性IE的event对象属性主要包括以下几个。（1）type：指事件的类型。（2）srcElement：事件源，即发生事件的元素。（3）button：声明被按下的鼠标键，其返回值为一个整数。（4）clientX/clientY：指事件发生时，鼠标的横、纵坐标，返回整数，其值是相对于包容窗口的左上角生成的。（5）offsetX/offsetY：指鼠标指针相对于源元素的位置，可确定单击Image对象的哪个象素。（6）altKey/ctrlKey/shiftKey：这些属性指鼠标事件发生时是否同时按住了Alt、Ctr

8、l或者Shift键，返回一个布尔值。（7）keyCode：返回keydown和keyup事件发生时按键的代码以及keypress事件的Unicode字符。（8）fromElement、toElement：前者指代mouseover事件移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素。（9）cancelBubble：布尔属性，用于检测是否接受上层元素的事件的控制。（10）returnValue：布尔属性，设置是否可以阻止浏览器执行默认的事件动作 11.3.1 event对象的属性11.3.2 检测鼠标信息使用event对象检测用户的鼠标情况，需编写onmouseover事件的处理程序。11.3.3 检测用户