五、JavaScript事件和对象.docVIP

五、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网页总是拥有三个部分的内容： 在Head部分定义一些JavaScript函数，其中的一些可能是事件处理函数，另外一些可能是为了配合这些事件处理函数而编写的普通函数。 HTML本身的各种控制标记。 拥有句柄属性的HTML标记，主要涉及到一些界面元素。这些元素可以把HTML同JavaScript代码相连。 为了理解JavaScript的事件处理模型，可以设想一下在一个WEB页面可能会遇到怎样的用户相应。归纳起来，必须使用的事件主要有三大类： 一类是引起页面之间跳转的事件，主要是超级连接事件。再一类是浏览器自己引起的事件，例如网页的装载，表单的提交等等。另一类事件是在表单内部同界面对象的交互，包括界面对象的选定、改变等。可以按照应用程序的具体功能自由设计。 5.2 JAVASCRIPT事件驱动 JavaScript事件主要包括三大类的事件：超级连接的事件，浏览器的事件和界面事件。超级连接事件包括：Click，MouseOut，MouseOver，MouseDown，MouseUp事件。浏览器事件主要包括：各种元素Load, Unload等等。下面我们主要介绍一些常用的事件的处理。 5.2.1 单击事件 鼠标单击事件是最最常见得事件，我们只要写JavaScript程序都会用到单击事件。语法非常的简单： onclick=函数或是处理语句 请看下面的案例： 案例名称：单击事件 程序：5-1.htm html body form Input type=button Value=鼠标响应 onClick=alert(这是一个例子) /form /body /html 当鼠标单击按钮的时候，自动弹出一个alert对话框，显示的结果如图5-1所示。 图5-1单击事件 5.2.2 onchange事件 所谓的onchange事件就是当文本框的内容改变的时候，发生的事件。语法和刚才的Onclick事件比较的类似： onchange=处理函数或是处理语句 请看我们下面的onchange事件： 案例名称：onchange事件 程序：5-13.htm html body form Input type=text name=Test value=Test onChange=alert(TextBox值发生了变化！) /form /body /html 当文本框的内容发生改变的时候，就回自动弹出一个Alert框，显示的结果如图5-2所示。 图5-2 onchange事件 5.2.3 onselect事件 所谓的onselect事件就是当文本框的内容被选中的时候，发生的事件。语法和刚才的Onclick事件比较的类似： onselect=处理函数或是处理语句 请看我们下面的onselect事件： 案例名称：onselect事件 程序：5-2.htm html body form Input type=text name=Test value=Test onSelect=alert(我被选中了！) /form /body /html 当文本框中内容被选中的时候就会自动弹出对话框，显示的结果如图5-3所示。 图5-3 onselect事件 可以看出当文本框的内容test被选中的时候，onselect事件就被触发了。 5.2.4 onfocus事件 所谓的onfocus事件就是当光标落在文本框中的时候，发生的事件。语法和刚才的Onclick事件比较的类似： onfocus=处理函数或是处理语句 请看我们下面的onfocus事件： 案例名称：onfocus事件 程序：5-3.htm html body form Input type=text name=Test1