《基于任务驱动模式的javascript程序设计案例第3章javascript事件处理》由会员分享，可在线阅读，更多相关《基于任务驱动模式的javascript程序设计案例第3章javascript事件处理（70页珍藏版）》请在金锄头文库上搜索。
1、第3章 JavaScript事件处理,3.1 概述 3.2 什么是事件 3.3 HTML文档事件 3.4 JavaScript如何处理事件 3.5 事件处理器设置的灵活性 3.6 IE中的Event对象,3.1 概 述 用户可以通过多种方式与浏览器中的页面进行交互，而事件正是作为这种交互的桥梁出现的。Web应用程序开发人员通过JavaScript脚本内置的和自定义的事件处理器来响应用户的动作，从而开发出更具交互性和动态性的页面。 本章主要介绍JavaScript中事件处理的概念和方法，列出了JavaScript预定义的事件处理器，并且介绍了如何编写用户自定义的事件处理函数，以及如何将它们与页面
2、中用户的动作相关联而得到预期的交互性能。,3.2 什 么 是 事 件 广义上讲，JavaScript中的事件是指用户载入目标页面直到该页面被关闭期间，浏览器的动作及该页面对用户操作的响应。事件的复杂程度大不相同，简单的如鼠标的移动、当前页面的关闭、键盘的输入等，复杂的如拖曳页面图片或单击浮动菜单等。 事件处理器是与特定的文本和特定的事件相联系的 JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作；而响应某个事件进行的处理过程称为事件处理。 下面就是简单的事件触发和处理过程，如图3-1所示。,图3-1,JavaScript中的事件并不限于用户的页
3、面动作如MouseMove、Click等，还包括浏览器的状态改变，如在绝大多数浏览器获得支持的Load、Resize事件等。Load事件在浏览器载入文档时触发，如果某事件(如启动定时器、提前加载图片等)要在文档载入时触发，一般都在标记里面加入类似于“onload=“MyFunction()“”的语句；Resize事件则在用户改变了浏览器窗口的大小时触发，当用户改变窗口大小时，需改变文档页面的内容布局，使其以恰当、友好的方式显示给用户。,浏览器响应用户的动作，如鼠标单击按钮、链接等，并可以通过默认的系统事件与该动作相关联，但用户也可以通过编写自己的脚本，来改变该动作的默认事件处理器。举个简单的例
4、子，模拟用户单击页面链接，该事件产生的默认操作是浏览器载入链接的href属性对应的URL地址所代表的页面，但利用JavaScript脚本语言能够很容易地编写另外的事件处理器来响应该单击鼠标的动作。考察如下代码：,现代事件模型中引入Event对象，它包含其他对象使用的常量和方法。当事件发生后，产生临时的Event对象实例，并附加当前事件的信息如鼠标定位、事件类型等，然后传递给相关的事件处理器进行处理。事件处理完毕后，该临时Event对象实例所占据的内存空间被释放出来，浏览器便可以等待其他事件的出现并进行处理。如果短时间内发生的事件较多，浏览器按事件发生的顺序依次执行。,事件发生的场合很多，包括浏
5、览器自身状态的改变和页面中的按钮、链接、图片、层等。同时根据DOM模型，文本也可以作为对象并响应相关动作，如鼠标双击、文本被选择等。事件的处理方法与结果同浏览器环境有很大的关系，但总的来说，浏览器的版本越新，支持的事件处理器就越多、越完善。基于此，在编写JavaScript脚本时，要充分考虑浏览器的兼容性，以编写适合大多数浏览器的脚本语言。,3.3 HTML文档事件 3.3.1 事件绑定 HTML文档将元素的常用事件(如onclick、onmouseover等)当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑使得特
6、定的代码被放置在所处对象的事件处理器中。考察如下代码：,鼠标单击“MyLinker”链接后，浏览器调用自定义的Click事件处理器，并将结果(警告框“You have Clicked the link!”)返回给浏览器。由事件处理器的实现形式来看，标记的onclick事件与其href属性的地位均等，实现了HTML中的事件捆绑策略。 3.3.2 浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭文档事件onunload、失去焦点事件onblur、获得焦点事件onfocus等。考察如下代码：,将上述源程序保存为*.html(或*.htm)文档，
7、双击该文档后系统调用默认的浏览器进行浏览。 当载入该文档时，触发window.load事件，弹出警告框如图3-2所示。,图3-2,当把焦点给该文档页面时，触发window.onfocus事件，弹出警告框如图3-3所示。,图3-3,当该页面失去焦点时，触发window.blur事件，弹出警告框如图3-4所示。,图3-4,当用户拖动滚动条时，触发window.onscroll事件，弹出警告框如图3-5所示。,图3-5,当用户改变文档页面大小时，触发window.onresize事件，弹出警告框如图3-6所示。 浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合，且在
8、页面的交互性、动态性方面使用较为广泛。,图3-6,3.3.3 HTML元素事件 页面载入后，用户与页面的交互主要指发生在(如按钮、链接、表单、图片等)HTML元素上的用户动作，以及该页面对此动作作出的响应上。如简单的鼠标单击按钮事件：元素为button、事件为click、事件处理器为onclick()。了解了该事件的相关信息，程序员就可以编写其接口的事件处理程序(也称事件处理器)，从而实现诸如表单验证、文本框内容选择等功能。 HTML文档中元素对应的事件因元素类型而异，表3-1列出了当前通用版本浏览器上支持的常用事件。,表3-1,图3-7,鼠标点击文本框后，文本框获得当前输入焦点，触发MyFo
9、cus()函数，弹出警告框如图3-8所示。,图3-8,修改文本框的文本后，鼠标在文本框外文档中任意位置点击，触发MyBlur()函数的同时，触发MyChange()函数，弹出警告框如图3-9所示。,图3-9,在文本框获得焦点后，用鼠标选择某段文本，触发MySelect()函数，弹出警告框如图3-10所示。 HTML元素事件在表单提交、在线办公、防止网站文章被复制、禁止下载网页中图片等方面应用十分广泛，其主要是能有效识别用户的动作并做出相应的反应，如弹出警告框、执行window.close()方法关闭页面等操作。,图3-10,3.3.4 获得页面元素 在对事件进行处理之前，我们先来了解一下如何获
10、得页面中的某个特定元素，以便对该元素进行简单的操作。在HTML4版本中添加了HTML元素的id属性来定位文档对象，基本上每一个页面元素都可以设置id属性，无论是、标记，或者是表单元素等等，通过调用document对象的getElementById()方法可以获得该元素，语法如下所示：,3.4 JavaScript如何处理事件 3.4.1 匿名函数 匿名函数的方式即使用Function对象构造匿名的函数，并将其方法复制给事件，此时该匿名的函数成为该事件的事件处理器。考察如下代码：,程序运行结果如图3-11所示。,图3-11,3.4.2 显式声明 设置事件处理器时，也可不使用匿名函数，而是将该事件
11、的处理器设置为已经存在的函数。考察如下代码：,程序运行后即显示图片“1.jpg”如图3-12所示。,图3-12,当鼠标移动到图片区域时，图片发生变化，即显示图片“2.jpg”，如图3-13所示。,图3-13,3.4.3 手工触发 手工触发事件的原理相当简单，就是通过其他元素的方法来触发一个事件，而不需要通过用户的动作来触发该事件。在上一节源程序代码段的和标记之间插入如下代码：,图3-14,3.5 事件处理器设置的灵活性 由于HTML可以将事件看成对象的属性，通过给该属性赋值的方式来改变事件的处理器，这使得使用JavaScript设置事件处理器有了很大的灵活性。考察如下实例：,程序运行后，单击“
12、测试按钮 : 触发事件处理器A”按钮，弹出警告框如图3-15所示。,图3-15,在上述警告框中单击“确定”按钮后，返回原始页面，更改按钮的value属性为“测试按钮 : 触发事件处理器B”。继续单击该按钮后，弹出警告框如图3-16所示。,图3-16,(4) 在提示页面单击“确定”按钮返回原始页面后，返回步骤(2)。 在JavaScript中根据复杂的客户端环境及时更改事件的处理器，可大大提高页面的交互能力。 值得注意的是，给对象的事件属性赋值为事件处理函数时，后者要省略函数后面的括号，且对象和函数要在显式赋值语句之前定义。,3.6 IE中的Event对象 由于IE中文档的每个元素都作为一个对象
13、而存在，因而增加了事件发生的概率和可用的事件数目。当事件发生的时候，浏览器创建全局的Event对象，并使它为合适的事件处理器所用。 3.6.1 对象属性 IE中的Event对象提供非常丰富的属性供脚本程序员调用，如事件发生的原始对象、相对位置等，其常见属性及功能介绍如表3-2所示。,表3-2,图3-17,在IE中，任何事件发生后生成的Event对象对该文档而言是透明的，可将其看成是全局变量使用，即在文档任何地方都不需通过传入参数的方式来调用。该变量生成于其对应的事件发生之时，且在文档被浏览器关闭时对象所占据的内存空间被释放出来。 3.6.2 事件冒泡 IE中的大部分事件会沿着关系树上溯(Bub
14、ble，也称冒泡)，在继承关系的每一层如果存在合适的事件处理器则调用，不存在则继续上溯，直至上升到关系树的顶端或者被某个层所取消，但不支持上溯的事件仅能调用当前事件发生的原始对象那个层次上可用的事件处理器。,图3-18,3.6.3 阻止事件冒泡 IE中的事件严格按照文档中元素对象的层次关系上溯，而不管实际应用中是否需要将该事件上溯到对象关系中特定的层次。为达到在对象关系中指定层次中断事件上溯的目的，程序员可设置Event对象的cancleBubble属性为true来实现。 参考下面的示例代码：,程序运行后，单击页面中的“EM text”文本段，然后单击“测试”按钮，弹出对话框如图3-19所示。,图3-19,程序结果显示，在对象模型某层次设置Event对象的cancelBubble属性后，事件的上溯过程被中断，达到阻止事件上溯的目的。 IE中的事件模型为很经典的模型架构，通过其提供的诸多属性，脚本程序员很容易把握其事件的触发机制，编制出高质量的事件控制脚本。,
