Javascript基础入门教程)_第17章事件处理.pdfVIP

第17章 事件处理 事件处理是实现动态网页的基础，Web 页面通过事件与用户进行交互，响应用户的 操作。不同的浏览器提供了不同的事件处理模型，同时W3C 也提出了 DOM 2 事件模型。 本章将按照不同的事件模型分别介绍事件处理的过程。在本章的最后专门介绍了在开发 中常用的鼠标事件和键盘事件的处理。 17.1 基本事件模型 17.1.1 事件与事件处理器 事件是某一时刻所发生的特定行为。例如，当用户点击一个按钮或一个超链接时就 会触发 click(单击)事件，当用户提交一个表单时就会触发 submit(提交)事件，当用户按 下键盘上的按键时就会触发 keydown(键按下)事件等等。 事件处理器是一段 JavaScript 脚本，其和特定的事件类型相关联，当该 HTML 元素 相应的事件发生时就会执行事件处理器的 JavaScript 代码。 事件处理器的名称通常是在事件类型的前面加上“on ”作为前缀，习惯上规定在事 件处理器名称中的事件类型各个单词的首字母要大写。例如，click 事件的事件处理器名 称为“onClick ”，mouseout 事件的事件处理器名称为“onMouseOut ”。 事件的绑定就是将特定的事件处理器与页面中 HTML 元素建立一定的联系，当在 HTML 元素上触发与事件处理器相关的事件时，事件处理器中指定的代码就会被执行。 实现事件处理器的绑定的方法有以下几种： ● 使用 HTML 标签属性绑定事件处理器 ● 使用 JavaScript 对象属性绑定事件处理器 ● 使用script标签的属性绑定事件处理器 ● 使用 attachEvent()方法绑定事件处理器 ● 使用 addEventListener()方法绑定事件处理器 其中，前两种是最基本的事件处理器绑定方法，将会在本节中介绍，其余的方法将 地在本章后面的章节陆续介绍。各种事件处理器绑定方法没有好坏之分，开发人员应该 根据实现情况选择使用事件处理器绑定的方法。 17.1.2 使用HTML 标签属性绑定事件处理器 使用 HTML 标签绑定事件处理器，就是利用 HTML 元素标签中的事件属性指定事 件处理器。HTML 提供的事件有很多，有些事件可以被大部分 HTML 元素触发，有些 则只适用于特定的 HTML 元素。表 17-1 列出了 XHTML 中支持的事件属性、激发条件 • 2 • 及支持该属性的 HTML 元素的说明。HTML 不区别大小写但 XHTML 区别大小写，为 了和XHTML 兼容，表中的所有属性都使用的形式。 表17-1 XHTML 元素的事件属性 事件属性 激发条件 支持该属性的HTML 元素 onabort 当用户中断图像装载时发生 img 元素 onblur 当一个元素失去来自鼠标或键盘 label 、input 、select、textarea 和 button 的焦点时发生，它和 onfocus 相对 元素 应 onchange 当一个元素丢失焦点，其值被改 input 、select 和 textarea 元素 变时 onclick 当一个元素被鼠标单击时发生 绝大多数元素 ondblclick 当一个元素被鼠标双击时发生 绝大多数元素 ondragdrop 将对象拖放到窗口或框架时发生 body 、frame 和 frameset 元素 onerror 当装入窗口、框架、图像期间出 body 、frame 、frameset 和 img 元素 错时发生 onfocus 当一个元