📄 day5_5.html
字号:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: purple; text-decoration: underline}
.unnamed1 { font-family: "宋体"; font-size: 9pt}
-->
</style>
<style>
<!--#menu {position: absolute;
left: 1px;top: 174px;width: 163px;height: 300px;}
-->
</style>
<style>
<!--#content {position: absolute;
left: 175px;top: 184px;width: 435px;height: 300px;}
-->
</style>
<title>网猴：动态HTML</title>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 10px; top: 11px">
<table border="0" width="600" cellspacing="0">
<tr>
<td bgcolor="#ffff99" colspan="2"><font size="4" color="#000000"><strong>动态HTML教程
- 第五天</strong></font></td>
</tr>
<tr>
<td bgcolor="#FF6600" colspan="2"><em><font size="4"><a href="mailto:taylor@taylor.org">Taylor</a>
</font><font size="3">1998.3.9</font></em></td>
</tr>
</table>
<p><strong>第五页：关于Event对象</strong></p>
<p>在你完全掌握dHTML前，你需要了解event对象。两种4.0浏<br>
览器都包含event对象。它在事件创立时产生，如点击一个可<br>
点击的对象，移动鼠标，或聚焦到一个窗体元素上。Event对<br>
象被创建然后传递给处理事件的函数。</p>
<p>下面是event对象属性的描述，以及Netscape和IE处理它们的<br>
方式：</p>
<table border="2">
<tbody>
<tr>
<th align="left" height="28" vAlign="baseline" width="253"><b><a name="1005913"><b>描述</b></a></b></th>
<th align="left" height="28" vAlign="baseline" width="91">Microsoft 属性</th>
<th align="left" height="28" vAlign="baseline" width="126"><b><b><a name="1005911">Netscape
</a></b>属性</b></th>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253">代表事件类型的字符串</td>
<td align="left" vAlign="baseline" width="91"><tt>type</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005567"><tt>type</tt></a> </td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253">代表最初发送给对象事件的字符串</td>
<td align="left" vAlign="baseline" width="91"><tt>srcElement</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005571"><tt>target</tt></a>
</td>
</tr>
<tr>
<td align="left" height="67" vAlign="top" width="253"><a name="1005577">光标横坐标</a>
</td>
<td align="left" height="67" vAlign="top" width="91"><tt>x</tt> </td>
<td align="left" height="67" vAlign="top" width="126"> <tt>x</tt> </td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253">光标纵坐标</td>
<td align="left" vAlign="baseline" width="91"><tt>y</tt> </td>
<td align="left" vAlign="baseline" width="126"> <tt>y</tt> </td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253"><a name="1005587">相对于页面的横坐标</a>
</td>
<td align="left" vAlign="baseline" width="91"><tt>clientX</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005585"><tt>pageX</tt></a>
</td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253"><a name="1005587">相对于页面的纵坐标</a>
</td>
<td align="left" vAlign="baseline" width="91"><tt>clientY</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005589"><tt>pageY</tt></a>
</td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253"><a name="1005595">相对于屏幕的横坐标</a>
</td>
<td align="left" vAlign="baseline" width="91"><tt>screenX</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005593"><tt>screenX</tt></a>
</td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253"><a name="1005595">相对于屏幕的纵坐标</a>
</td>
<td align="left" vAlign="baseline" width="91"><tt>screenY</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005597"><tt>screenY</tt></a>
</td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253"><a name="1005603">键代码</a> </td>
<td align="left" vAlign="baseline" width="91"><tt>keyCode</tt> </td>
<td align="left" vAlign="baseline" width="126"> <a name="1005601"><tt>which</tt></a>
</td>
</tr>
<tr>
<td align="left" vAlign="baseline" width="253"><a name="1005607">Netscape返回键的代码，IE
返回true或false</a> </td>
<td align="left" vAlign="baseline" width="91"><tt>altKey</tt><br>
<tt>ctrlKey</tt><br>
<tt>shiftKey</tt> </td>
<td align="left" vAlign="baseline" width="126"><a name="1005605"><tt>modifiers</tt></a></td>
</tr>
</tbody>
</table>
<p>4.0浏览器增加了一些新事件：</p>
<table border="1" width="80%">
<tbody>
<tr>
<td width="32%"><tt>onDblClick</tt></td>
<td width="68%">鼠标双击</td>
</tr>
<tr>
<td width="32%"><tt>onKeyDown</tt></td>
<td width="68%">键被按下</td>
</tr>
<tr>
<td width="32%"><tt>onKeyPress</tt></td>
<td width="68%">键被按下然后被释放</td>
</tr>
<tr>
<td width="32%"><tt>onKeyUp</tt></td>
<td width="68%">键被释放</td>
</tr>
<tr>
<td width="32%"><tt>onMouseDown</tt></td>
<td width="68%">鼠标被按下</td>
</tr>
<tr>
<td width="32%"><tt>onMouseMove</tt></td>
<td width="68%">鼠标移动</td>
</tr>
<tr>
<td width="32%"><tt>onMouseUp</tt></td>
<td width="68%">鼠标被释放</td>
</tr>
<tr>
<td width="32%"><tt>onResize</tt></td>
<td width="68%">窗口被调整大小</td>
</tr>
</tbody>
</table>
<p>4.0浏览器也增加了处理事件的新方法，虽然它们（Netscape<br>
和IE）的方式不同。Netscape用的是“时间捕捉”，IE用的<br>
是“事件气泡”。</p>
<p>事件处理对Netscape处理如mouseMove或keyPress等事件是必<br>
须的，它并不隐含指向一个标记或元素。你应该告诉客户注<br>
意这些事件，并告诉它用什么函数来处理它们。下面例子<br>
用window对象的captureEvents方法来描述正在捕捉的事件：</p>
<pre>window.captureEvents(Event.MOUSEMOVE);</pre>
<p>注意到在不用on作为名称一部分的情况下特定事件是如何被<br>
指向的。你只是告诉Netscape注意所有发生在窗口中的事件<br>
并捕捉它们。然后你需要告诉Netscape用这些被捕捉的时间<br>
做些什么。注意on又出现了。</p>
<pre>window.onMouseMove = handlerFunction;
function handerFunction(yourEvent) {
alert(yourEvent.screenX);
}</pre>
<p>这段代码是一个演示事件过程的烦人的例子。每次你移动<br>
鼠标，一个对话框会跳出来告诉你它的横坐标位置。以这种<br>
方式处理的事件传递一个指针到event对象。从这儿你可以获<br>
取必要的信息。一旦你厌倦了捕捉事件，你可以象这样释放<br>
它们：</p>
<pre>window.releaseEvents(Event.MOUSEMOVE);</pre>
<p>于是这种类型的事件不再被捕捉。</p>
<p>IE用不同的方法处理事件，叫做“事件气泡”。在这种方<br>
法中，如果你有这样一个结构：</p>
<pre><body onclick="bloorf()">
<p onclick="baz()">
<em onclick="bar()">
<strong onclick="foo()">Click on me</strong>
</em>
</p>
</body></pre>
<p>如果你点击strong标记内的文本，它接收到一个onClick事<br>
件，然后发送onclick事件给<em>标记，处理它然后发送到<br>
<p>标记，等等，然后直到窗口。这样每个元素以自己的方<br>
式处理点击。但是如果你想停止气泡上传，可以取消气泡。</p>
<p><script><br>
function foo() { <br>
doSomeThing(); <br>
this.event.cancelBubble = true;<br>
}<br>
</script></p>
<p>所以如果你不想让某个事件传递到所有它包含的标记，可以<br>
象上面那样阻止它。</p>
<p>你可以看到，因为两种浏览器存在相似的事件，每一步都需<br>
要大量的条件化工作，而且没有简单的方式把它们映射到一<br>
个句法中。<a href="day5_6.html">>></a></p>
<p><strong>动态HTML教程</strong><br>
<font color="#FF0000">第一页</font> <a href="day5_1.html">排错</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html">放在底部和右面</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html">Netscape的调整大小问题</a><br>
<font color="#FF0000">第四页</font> <a href="day5_4.html">一定要把样式加在标记中吗？</a><br>
<font color="#FF0000">第五页</font> 关于Event对象<br>
<font color="#FF0000">第六页</font> <a href="day5_6.html">课程结束</a></p>
<p><font size="3">[<a href="day1_1.html">第1天</a>][<a href="day2_1.html">第2天</a>][<a href="day3_1.html">第3天</a>][<a href="day4_1.html">第4天</a>][第5天]</font></p>
<font size="3">
<hr>
</font><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top"><br>
</a>本文由<a href="http://chd.126.com" target="_blank">《CHD的网络教室》</a>根据<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>相关文章改编，版权归<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>所有</font></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -