DHTML对象模型（About the DHTML Object Model）(二)

heroyu

墨衍会员 · AI 创作全网分发码龄23年

关注

原创最新推荐文章于 2026-09-10 12:43:53 发布 947 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

事件：冒泡、禁止与处理

单击一个按钮，移动鼠标指针到网页的一部分，在页面上选中一些文本——这些动作都会激发事件。一个DHML的网页制作者可以编写代码以便在响应这些事件的时候运行，这段特定的代码通常称为事件句柄，因为它确实在处理事件。

事件处理不仅限于IE4.0和IE3.0, Netscape Navigator 3.x 和Communicator都支持事件处理。然而，在IE4.0中，无论是作为事件源的web页面Html元素，还是这些事件源引发的事件的种类，都已经被大大地扩展。以前，只有很少的一些HTＭＬ元素，好像锚点、图片热点、表单元素、application对象和object对象等，可以引发事件。在IE4.0事件模型中，页面上的每一个HTML元素都可以引发所有的鼠标和键盘事件。

下面的列表中列出了在IE4.0(及其后的更高版本—译者注)中，任一HTML元素都可激发的常用事件：

鼠标事件	激发事件的用户行为:
onmouseover	Moves the mouse pointer over (that is, enters) an element.
onmouseout	Moves the mouse pointer off (that is, exits) an element.
onmousedown	按下鼠标的任一件。
onmouseup	释放鼠标的任一键。
onmousemove	在元素的内部移动鼠标指针。
onclick	在元素上单击鼠标左键。
ondblclick	在元素上双击鼠标左键。
键盘事件	激发事件的用户行为:
onkeypress	按下并释放一个键(整个按下—弹起的过程).注意，若一个建被持续按下，多个onkeypress 事件将会被连续激发。
onkeydown	按下按键，该事件只会被激发一次，即使该键被持续按下。
onkeyup	释放按键

为了帮助网页制作者更紧凑、更简单和更容易维护地创建代码，IE4.o将事件冒泡作为处理事件的新方法。Microsoft Windows®, OS/2, OSF Motif, 和几乎所有其它的图形用户界面平台都是使用这种技术在它们的用户界面中处理事件的。但是对于HTML来说，事件冒泡却是一种新的方法，它提供了一个在Web文档上合成事件句柄的有效模型。

在以前，若一个HTML元素被激发了一个事件，但在这个元素上，相应的事件句柄并没有被注册，这个事件就会消失，不再被感觉到存在了。事件冒泡机制则把这个未处理的事件进一步向上传递给元素的父级元素。于是，这个事件继续在元素的层次结构中向上冒（像气泡向上冒一样），直到它被处理，或者到达了对象模型的顶层，document对象。

事件冒泡的有效性在于以下几点：

l 允许多个元素上的共同动作被统一处理。

l 减少Web页面上代码的数量。

l 减少更新文档时，要更改的代码的数量。

下面是一个事件冒泡的简单例子：

(例子的超级链接;

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_01.htm )

<HTML>

<BODY>

<DIV id=OuterDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">

This is some text

<IMG id=InnerImg>

</DIV>

</BODY>

</HTML>

在这个页面中当用户在文本区域上移动鼠标指针时，将会弹出一个写有“OuterDiv”字样的对话框，若用户在图片上移动鼠标指针时，带有“InnerImg”字样的对话框将会弹出。

请注意，img对象的onmouseover事件是在该事件句柄没有在对象上注册的情况下被处理。为什么可以这样呢？因为onmouseover事件向上冒泡到了它的父级元素，div对象。由于在div对象上为onmouseover事件注册了事件句柄，它引发了事件处理并产生了上面所提到的对话框。

每次一个事件被激发，window对象的一个特殊的属性就会被创建。这个特殊的属性包括了事件对象(event对象)。这个事件对象包含了刚被激发的事件的上下文信息，例如鼠标位置、键盘状态以及最重要的这个事件的源元素。

源元素就是出发这个事件的元素，可以通过window.event对象的srcElement属性访问到它。

在上面的例子里，对话框显示的就是激发这个事件的源元素的id属性。

处理鼠标效果：

网页制作者可以通过制作鼠标效果来令页面的一部分在用户把鼠标指针移动到上面时作出交互反应。在IE4.0中创造鼠标效果的处理过程是十分简单的。

(例子的超级链接：

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_02.htm )

<HTML>

<HEAD>

<STYLE>

.Item {

   cursor: hand;

   font-family: verdana;

   font-size: 20;

   font-style: normal;

   background-color: blue;

   color: white

.Highlight {

   cursor: hand;

   font-family: verdana;

   font-size: 20;

   font-style: italic;

   background-color: white;

   color: blue

</STYLE>

</HEAD>

<BODY>

<SPAN class=Item>Milk</SPAN>

<SPAN class=Item>Cookies</SPAN>

<SPAN class=Item>Eggs</SPAN>

<SPAN class=Item>Ham</SPAN>

<SPAN class=Item>Cheese</SPAN>

<SPAN class=Item>Pasta</SPAN>

<SPAN class=Item>Chicken</SPAN>

<SCRIPT>

function rollon() {

  if (window.event.srcElement.className == "Item") {

     window.event.srcElement.className = "Highlight";

document.onmouseover = rollon;

function rolloff() {

  if (window.event.srcElement.className == "Highlight") {

     window.event.srcElement.className = "Item";

document.onmouseout = rolloff;

</SCRIPT>

</BODY>

</HTML>

在上面的例子中，7个span对象被使用item 样式类设置成了斜体。当鼠标指针在这7个元素中的任一个个上悬浮移动时，它的样式将会被改变成Highlight样式类指定的那样。

Internet Explorer 4.0中的新功能带来了以下好处：

l 现在事件可以从span标记中被激发，而以前，网页制作者可能就必须先把每一个span的内容都包装在一个锚点标记(anchor)中，才能获得相应的事件。

l 使用事件冒泡，事件可以在文档对象（document object）这个层次上被捕获。你不必为参与这个效果每个每个元素都注册一个独立的事件处理句柄。例如，假如网页制作者向页面添加HTML代码，这些附加的元素将会自动参与这个事件模型而不需改动哪怕一行的脚本代码。注意一点，文档对象（document object）是在这个文档里面的所有元素的“超级父类”（super parent）元素。