梦想飞翔

五 、 JavaScript 事件和对象

目标 :

应掌握以下内容：

 

Ø         理解事件驱动机制

Ø         会使用常用的事件触发机制，如： Click 、 OnChange 等事件

关键知识点：

Ø         会使用常用的事件触发机制，如： Click 、 OnChange 等事件

Ø         常用对象处理语句： this 、 for…in 、 with 和 new 。

Ø         JavaScript 内置对象：时间对象， Math 对象、 String 对象和数组对象

Ø         JavaScript 常用函数

 

5.1 事件的概念

HTML 规范中常用的标记非常简单，这是 HTML 语言的一个特点，但同时也是它的功能受到很大的限制。事件是浏览器相应用户交互操作的一种机制。当然，任何程序包括浏览器本身都有一套已经设计好的相应各种事件的方法。 JavaScript 的事件处理机制就可以改变浏览器响应用户操作的标准方法，这样就可以开发出更加具有交互性，更容易使用的 Web 页面。

为什么要利用 JavaScript 的事件呢？主要有下面的两个用途：

1 ．验证用户输入窗体的数据。

2 ．增加页面的动感效果。

一个利用 JavaScript 实现交互功能的 WEB 网页总是拥有三个部分的内容：

l         在 Head 部分定义一些 JavaScript 函数，其中的一些可能是事件处理函数，另外一些可能是为了配合这些事件处理函数而编写的普通函数。

l         HTML 本身的各种控制标记。

l         拥有句柄属性的 HTML 标记，主要涉及到一些界面元素。这些元素可以把 HTML 同 JavaScript 代码相连。

为了理解 JavaScript 的事件处理模型，可以设想一下在一个 WEB 页面可能会遇到怎样的用户相应。归纳起来，必须使用的事件主要有三大类：

一类是引起页面之间跳转的事件，主要是超级连接事件。再一类是浏览器自己引起的事件，例如网页的装载，表单的提交等等。另一类事件是在表单内部同界面对象的交互，包括界面对象的选定、改变等。可以按照应用程序的具体功能自由设计。

5.2 JAVASCRIPT 事件驱动

JavaScript 事件主要包括三大类的事件：超级连接的事件，浏览器的事件和界面事件。超级连接事件包括： Click ， MouseOut ， MouseOver ， MouseDown ， MouseUp 事件。浏览器事件主要包括：各种元素 Load, Unload 等等。下面我们主要介绍一些常用的事件的处理。

5.2.1 单击事件

鼠标单击事件是最最常见得事件，我们只要写 JavaScript 程序都会用到单击事件。语法非常的简单：

请看下面的案例：

当鼠标单击按钮的时候，自动弹出一个 alert 对话框，显示的结果如图 5-1 所示。
 

图 5-1 单击事件

5.2.2 onchange 事件

所谓的 onchange 事件就是当文本框的内容改变的时候，发生的事件。语法和刚才的 Onclick 事件比较的类似：

请看我们下面的 onchange 事件：

当文本框的内容发生改变的时候，就回自动弹出一个 Alert 框，显示的结果如图 5-2 所示。

图 5-2 onchange 事件

5.2.3 onselect 事件

所谓的 onselect 事件就是当文本框的内容被选中的时候，发生的事件。语法和刚才的 Onclick 事件比较的类似：

请看我们下面的 onselect 事件：

当文本框中内容被选中的时候就会自动弹出对话框，显示的结果如图 5-3 所示。

图 5-3 onselect 事件

可以看出当文本框的内容 test 被选中的时候， onselect 事件就被触发了。

5.2.4 onfocus 事件

所谓的 onfocus 事件就是当光标落在文本框中的时候，发生的事件。语法和刚才的 Onclick 事件比较的类似：

请看我们下面的 onfocus 事件：

当我们用鼠标选中一个文本框的时候，触发 Onfocus 事件，弹出一个对话框。显示的结果如图 5-4 所示。

图 5-4 Onfocus 事件