《基于新信息技术的JavaScript程序设计基础》课件_第11章.pptx

项目11JavaScript的事件与处理;

任务1先导知识：JavaScript的事件;

从广义上讲，JavaScript中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。事件的复杂程度大不相同，简单的事件如鼠标的移动、当前页面的关闭、键盘的输入等，复杂的事件如拖曳页面图片或单击浮动菜单等。

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

JavaScript中的事件并不限于用户的页面动作(如mousemove、click等)，还包括浏览器的状态改变，如在绝大多数浏览器中获得支持的load、resize事件等。load事件在浏览器载入文档时触发。如果某事件(如启动定时器、提前加载图片等)要在文档载入时触发，一般都在body标记里面加入类似于“onload?=?MyFunction()”的语句。resize事件则在用户改变了浏览器窗口的大小时触发。当用户改变窗口大小时，有时需改变文档页面的内容布局，使其以恰当、友好的方式显示给用户。;

11.1.2HTML文档事件

HTML文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。

1.事件绑定

HTML文档将元素的常用事件(如onclick、onmouseover等)当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。;

2.事件分类

HTML文档事件主要分为浏览器事件和HTML元素事件。

1)浏览器事件

浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus等。;

将上述函数分别保存为不同的网页，当载入这些文档时，触发window.load事件，弹出警告框，如图11.1所示。;

当把焦点给该文档页面时，触发window.onfocus事件，弹出警告框，如图11.2所??。;

当该页面失去焦点时，触发window.onblur事件，弹出警告框，如图11.3所示。;

当用户拖动滚动条时，触发window.onscroll事件，弹出警告框，如图11.4所示。;

当用户改变文档页面大小时，触发window.onresize事件，弹出警告框，如图11.5所示。;

2)?HTML元素事件

在页面载入后，用户与页面的交互主要是指发生在按钮、链接、表单、图片等HTML元素上的用户动作，以及该页面对此动作所作出的响应。例如简单的鼠标单击按钮事件，元素为button，事件为click，事件处理器为onclick()。只要了解了该事件的相关信息，程序员就可以编写此接口的事件处理程序(也称事件处理器)，以完成表单验证、文本框内容选择等功能。

HTML文档中元素对应的事件因元素类型而异。表11.1列出了当前通用版本浏览器支持的常用事件触发类型。;;

(1)鼠标点击文本框外的其他文档区域后，文本框失去当前输入焦点，触发MyBlur()函数，返回警告框，如图11.6所示。;

(2)鼠标点击文本框后，文本框获得当前输入焦点，触发MyFocus()函数，返回警告框，如图11.7所示。;

(3)修改文本框的文本后，鼠标在文本框外文档中任意位置点击，触发MyBlur()函数的同时，触发MyChange()函数，返回警告框，如图11.8所示。;

(4)在文本框获得焦点后，用鼠标选择某段文本，触发函数MySelect()函数，返回警告框，如图11.9所示。;

3.获得页面元素

在对事件进行处理之前，我们先了解一下如何获得页面中的某个特定元素，以便对该元素进行简单的操作。在HTML4版本中添加了HTML元素的id属性来定位文档对象，基本上页面中的每一个元素都可以设置id属性，无论是p、b标记，还是表单元素input等，通过调用document对象的getElementById()方法可以获得该元素。;

任务2JavaScript的处理;

程序运行结果如图11.10所示。;

11.2.2显式声明

我们在设置事件处理器时，也可以不使用匿名函数，而是将该事件的处理器设置为已经存在的函数。

程序运行结果如图11.11所示。;

;

当鼠标移动到图片区域时，图片发生变化，如图11.12所示。;

11.2.3手工触发

手工触发