0036.htm

新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑

  <tr>
    <td align="left" valign="baseline" width="253">代表事件类型的字符串</td>
    <td align="left" valign="baseline" width="91" bgcolor="#F5F4FF"><tt>type</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>srcElement</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>x</tt> </td>
    <td align="left" height="67" valign="top" width="126">&nbsp; <tt>x</tt> </td>
  </tr>
  <tr>
    <td align="left" valign="baseline" width="253">光标纵坐标</td>
    <td align="left" valign="baseline" width="91" bgcolor="#F5F4FF"><tt>y</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>clientX</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>clientY</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>screenX</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>screenY</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><tt>keyCode</tt> </td>
    <td align="left" valign="baseline" width="126">&nbsp; <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" bgcolor="#F5F4FF"><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 align="center">4.0浏览器增加了一些新事件：</p>

<table border="1" width="80%" bgcolor="#EEFFEE" cellspacing="0">
<tbody>
  <tr>
    <td width="32%"><tt>onDblClick</tt></td>
    <td width="68%" bgcolor="#FFECEC">鼠标双击</td>
  </tr>
  <tr>
    <td width="32%"><tt>onKeyDown</tt></td>
    <td width="68%" bgcolor="#FFECEC">键被按下</td>
  </tr>
  <tr>
    <td width="32%"><tt>onKeyPress</tt></td>
    <td width="68%" bgcolor="#FFECEC">键被按下然后被释放</td>
  </tr>
  <tr>
    <td width="32%"><tt>onKeyUp</tt></td>
    <td width="68%" bgcolor="#FFECEC">键被释放</td>
  </tr>
  <tr>
    <td width="32%"><tt>onMouseDown</tt></td>
    <td width="68%" bgcolor="#FFECEC">鼠标被按下</td>
  </tr>
  <tr>
    <td width="32%"><tt>onMouseMove</tt></td>
    <td width="68%" bgcolor="#FFECEC">鼠标移动</td>
  </tr>
  <tr>
    <td width="32%"><tt>onMouseUp</tt></td>
    <td width="68%" bgcolor="#FFECEC">鼠标被释放</td>
  </tr>
  <tr>
    <td width="32%"><tt>onResize</tt></td>
    <td width="68%" bgcolor="#FFECEC">窗口被调整大小</td>
  </tr>
</tbody>
</table>

<p>4.0浏览器也增加了处理事件的新方法，虽然它们（Netscape和IE）的方式不同。Netscape用的是“时间捕捉”，IE用的是“事件气泡”。</p>

<p>事件处理对Netscape处理如mouseMove或keyPress等事件是必须的，它并不隐含指向一个标记或元素。你应该告诉客户注意这些事件，并告诉它用什么函数来处理它们。下面例子用window对象的captureEvents方法来描述正在捕捉的事件：</p>

<pre>window.captureEvents(Event.MOUSEMOVE);</pre>

<p>注意到在不用on作为名称一部分的情况下特定事件是如何被指向的。你只是告诉Netscape注意所有发生在窗口中的事件并捕捉它们。然后你需要告诉Netscape用这些被捕捉的时间做些什么。注意on又出现了。</p>

<pre>window.onMouseMove = handlerFunction;
function handerFunction(yourEvent) {
   alert(yourEvent.screenX);
}</pre>

<p>这段代码是一个演示事件过程的烦人的例子。每次你移动鼠标，一个对话框会跳出来告诉你它的横坐标位置。以这种方式处理的事件传递一个指针到event对象。从这儿你可以获取必要的信息。一旦你厌倦了捕捉事件，你可以象这样释放它们：</p>

<pre>window.releaseEvents(Event.MOUSEMOVE);</pre>

<p>于是这种类型的事件不再被捕捉。</p>

<p>IE用不同的方法处理事件，叫做“事件气泡”。在这种方<br>
法中，如果你有这样一个结构：</p>

<pre>&lt;body onclick=&quot;bloorf()&quot;&gt;
     &lt;p onclick=&quot;baz()&quot;&gt;
       &lt;em onclick=&quot;bar()&quot;&gt;
           &lt;strong onclick=&quot;foo()&quot;&gt;Click on me&lt;/strong&gt;
       &lt;/em&gt;
     &lt;/p&gt;
&lt;/body&gt;</pre>

<p>&nbsp;&nbsp;&nbsp; 如果你点击strong标记内的文本，它接收到一个onClick事件，然后发送onclick事件给&lt;em&gt;标记，处理它然后发送到&lt;p&gt;标记，等等，然后直到窗口。这样每个元素以自己的方式处理点击。但是如果你想停止气泡上传，可以取消气泡。</p>

<p>&lt;script&gt;<br>
function foo() <br>
{ <br>
&nbsp;&nbsp;&nbsp;&nbsp; doSomeThing(); <br>
&nbsp;&nbsp;&nbsp;&nbsp; this.event.cancelBubble = true;<br>
}<br>
&lt;/script&gt;</p>

<p>所以如果你不想让某个事件传递到所有它包含的标记，可以象上面那样阻止它。</p>

<p>你可以看到，因为两种浏览器存在相似的事件，每一步都需要大量的条件化工作，而且没有简单的方式把它们映射到一个句法中。
<p>虽然动态HTML背后有很多要了解的，但是你现在已经可以开始并使dHTML适应不同的浏览器。如果你想了解更多的内容，<a
href="javascript:if(confirm('../../www.microsoft.com/msdn/sdk/inetsdk/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.microsoft.com/msdn/sdk/inetsdk/default.htm'" tppabs="http://www.microsoft.com/msdn/sdk/inetsdk/">Microsoft</a>和<a
href="javascript:if(confirm('../../developer.netscape.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../developer.netscape.com/default.htm'" tppabs="http://developer.netscape.com/">Netscape</a>在它们的网站上都有扩展dHTML文档。</p>

<p>那么你觉得动态HTML怎样？爱它还是恨它？爱它所做的，但是在实现上的差异上又心存顾虑？事实上浏览器公司和<a
href="javascript:if(confirm('../../www.w3.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.w3.org/default.htm'" tppabs="http://www.w3.org/">World Wide Web Consortium</a>已经意识到这种差异，所以将来应该有解决办法。</p>

<p>最后，有一项期末作业：</p>

<p>做一个动态HTML主页，让它运动、让它可视和隐藏、让它反应用户事件。</p>

<p>祝你编码和设计快乐！</p>

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>