DHTML对象模型（About the DHTML Object Model）(二)
日期：2014-03-31 浏览次数：21186 次
事件：冒泡、禁止与处理
单击一个按钮，移动鼠标指针到网页的一部分，在页面上选中一些文本——这些动作都会激发事件。一个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";
}
}
单击一个按钮，移动鼠标指针到网页的一部分，在页面上选中一些文本——这些动作都会激发事件。一个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";
}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
