📄 js07.htm
字号:
<HTML>
<HEAD>
<TITLE>第七章 文档对象模型与事件驱动</TITLE>
<LINK rel="stylesheet" type="text/css" href="js.css">
</HEAD>
<BODY>
<H1><A name="第七章 文档对象模型与事件驱动">第七章 文档对象模型与事件驱动</A> <A href="index.htm">主目录</A></H1>
<HR>
<UL>
<LI><A href="#7.1 文档对象模型">7.1 文档对象模型</A><UL>
<LI><A href="#7.1.1 认识文档对象模型">7.1.1 认识文档对象模型</A></LI>
<LI><A href="#7.1.2 引用文档对象模型中的对象">7.1.2 引用文档对象模型中的对象</A></LI>
</UL>
</LI>
<LI><A href="#7.2 事件驱动">7.2 事件驱动</A><UL>
<LI><A href="#7.2.1 事件驱动的基本概念">7.2.1 事件驱动的基本概念</A></LI>
<LI><A href="#7.2.2 JavaScript的常用事件">7.2.2 JavaScript的常用事件</A></LI>
</UL>
</LI>
<LI><A href="#7.3 处理事件">7.3 处理事件</A><UL>
<LI><A href="#7.3.1 使用事件的方法">7.3.1 使用事件的方法</A></LI>
<LI><A href="#7.3.2 使用制作工具自动生成事件处理函数的模板">7.3.2 使用制作工具自动生成事件处理函数的模板</A></LI>
</UL>
</LI>
<LI><A href="#7.4 使用事件（Event）对象">7.4 使用事件（EVENT）对象</A></LI>
</UL>
<H2><A name="7.1 文档对象模型">7.1 文档对象模型</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H2>
<H3><A name="7.1.1 认识文档对象模型">7.1.1 认识文档对象模型</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H3>
<UL>
<LI>文档对象模型以对象形式描述HTML页面和Web浏览器的层次结构。</LI>
<LI>通过访问或设置文档对象模型中对象的属性并调用其方法，可以使程序按照一定的方式显示Web页面，并且与用户的动作进行交互。</LI>
<LI>文档对象模型如下图。</LI>
</UL>
<P align="center"><IMG border="0" src="js_07_01.gif" width="482" height="345"><BR>
<BR>
</P>
<UL>
<LI>这些对象的详细描述可从Microsoft脚本编辑器帮助系统中“DHTML参考”部分查找到。</LI>
</UL>
<H3><A name="7.1.2 引用文档对象模型中的对象">7.1.2 引用文档对象模型中的对象</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H3>
<UL>
<LI>所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性，所以引用子对象的方式，与引用对象的一般属性是相同的。如：</LI>
</UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>window.document.write("Hello");</P>
</BLOCKQUOTE>
</BLOCKQUOTE>
<UL>
<LI>由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window：</LI>
</UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>document.write("Hello"); </P>
</BLOCKQUOTE>
</BLOCKQUOTE>
<UL>
<LI>当引用较低层次的对象时，要根据对象的包含关系，一层一层地引用对象。如：</LI>
</UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>document.form1.yourname</P>
</BLOCKQUOTE>
</BLOCKQUOTE>
<UL>
<LI><A href="sample/S07_01.htm">例7.1</A>，使用脚本为表单中的文本输入框给出一个初值</LI>
</UL>
<H2><A name="7.2 事件驱动">7.2 事件驱动</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H2>
<H3><A name="7.2.1 事件驱动的基本概念">7.2.1 事件驱动的基本概念</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H3>
<UL>
<LI>
在图形界面的环境下，用户操作鼠标或按键的动作以及系统操作如载入页面等称为事件。如单击超链接或按钮时，就产生一个单击(click)事件；当载入一个页面时，就会发生载入(load)事件；等等。</LI>
<LI>
用户操作事件或系统操作事件引起一连串程序动作的执行方式，称为事件驱动。为了响应某个事件而进行的处理过程，称为事件处理。对事件进行处理的程序或函数，称为事件处理程序。</LI>
<LI>浏览器在程序运行的大部分时间都在等待交互事件的发生，并在事件发生时，自动调用、执行事件处理程序。</LI>
<LI>在JavaScript中，对事件的处理通常由函数来完成。另外，一段代码也可以作为事件处理程序。</LI>
</UL>
<H3><A name="7.2.2 JavaScript的常用事件">7.2.2 JavaScript的常用事件</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H3>
<UL>
<LI>绝大多数浏览器内部对象都拥有很多事件，表7-1列出了常用事件与对象的对应关系。</LI>
<LI>
如果HTML标记或程序为某个对象设置了事件处理程序，系统会自动捕捉发生在此对象上的这种事件，并触发所定义的事件处理程序。(注：系统对每个事件都会有一个默认的处理动作，如对于超链接上的单击事件onclick,它将引导浏览器显示链接的页面。如果在JavaScript中没有对事件进行特殊处理，浏览器将保持它的默认行为。)</LI>
<LI>在JavaScript中，除了属性和方法之外，事件也是对象的重要组成部分。</LI>
</UL>
<H2><A name="7.3 处理事件">7.3 处理事件</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H2>
<H3><A name="7.3.1 使用事件的方法">7.3.1 使用事件的方法</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H3>
<P>有两种方法:</P>
<UL>
<LI>使用HTML标记</LI>
<LI>使用JavaScript语句。</LI>
</UL>
<H4>一.通过HTML标记使用事件
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H4>
<UL>
<LI>许多HTML标记允许加上以事件名为名的属性，如：<BR>
<INPUT type="button" value="问侯男士" name="hello1" onclick="alert('先生,您好!');"></LI>
<LI>如果触发事件时要执行的语句比较多，则可以在事件属性中写入函数调用的语句：<BR>
<INPUT type="button" value="问侯小姐" name="hello2" onclick="return
hello_girl();"></LI>
<LI><A href="sample/S07_02.htm">例7.2</A>，设计一个表单，放入两个按钮，单击它们时将显示不同问候语。</LI>
</UL>
<H4>二.通过JavaScript代码使用事件
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H4>
<UL>
<LI>使用JavaScript语句：</LI>
</UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>对象.事件 = 函数名</P>
</BLOCKQUOTE>
</BLOCKQUOTE>
<UL>
<LI>把对象所拥有的事件当成一个属性，可以被赋值。如：</LI>
</UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>document.form1.hello_button.onclick=hello;</P>
</BLOCKQUOTE>
</BLOCKQUOTE>
<UL>
<LI><A href="sample/S07_03.htm">例7.3</A>，设计一个表单，放入1个按钮，单击它将显示一条问候语。</LI>
</UL>
<H3><A name="7.3.2 使用制作工具自动生成事件处理函数的模板">7.3.2 使用制作工具自动生成事件处理函数的模板</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H3>
<P><A href="sample/S07_04.htm">例7.4</A>，设计一个表单，放入1个按钮，单击它将显示一条问候语。</P>
<UL>
<LI>第一步,根据要求设计表单，然后在Microsoft脚本编辑器中打开这个文件.</LI>
<LI>
第二步,在脚本编辑器右部的“属性”窗口中将Document对象的defaultClientScript属性设置为JavaScript，targetSchema属性设置为HTML4.0。</LI>
<LI>第三步,在脚本编辑器左部的“文档大纲”窗口中双击对象hello的事件名onclick。</LI>
<LI>第四步,在生成的的模板函数hello_onclick()中输入所需要的事件处理语句。</LI>
</UL>
<P>由于是制作工具自动生成，因此代码结构更加规范，而且有以下好处：</P>
<UL>
<LI>1.读者不必记住对象有哪些可用的事件。</LI>
<LI>2.读者也不必强记那些与事件有关的HTML标记。</LI>
</UL>
<H2><A name="7.4 使用事件（Event）对象">7.4 使用事件（Event）对象</A>
<A href="#第七章 文档对象模型与事件驱动">(目录)</A></H2>
<UL>
<LI>通过Event对象，可以访问键盘按键、鼠标动作等事件的状态。</LI>
<LI>Event对象是window对象的子对象，可以在事件处理程序中直接使用。</LI>
<LI><A href="sample/S07_05.htm">例7.5</A>，设计一个空白网页，当您浏览它时在键盘上按下一个键，将会出现一个对话框显示当前事件
onkeyup 的一些属性。</LI>
<LI><A href="sample/S07_06.htm">例7.6</A>，禁止超链接。通常在网页上单击一个超链接将调出被链接的文档，但是本例要求当按下
SHIFT 键时单击超链接却不调出被链接的文档。</LI>
<LI><A href="sample/S07_07.htm">例7.7</A>，在浏览器的状态栏中显示鼠标坐标。</LI>
</UL>
</BODY>
</HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -