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

最新推荐文章于 2017-04-16 09:36:42 发布

原创最新推荐文章于 2017-04-16 09:36:42 发布 · 924 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#object #scripting #collections #function #security

博客主要围绕网页事件展开，介绍了禁止事件冒泡和默认行为的方法，如设置window.event.cancelBubble属性为“true”禁止冒泡，返回“false”或设置window.event.returnValue属性为“false”禁止默认行为。还探讨了onmouseover和onmouseout事件的应用，以及利用事件冒泡应用效果等内容。

禁止事件：

所有的事件都将向它们的父级元素冒泡，而且除非冒泡过程中事件被禁止了，否则事件将会被递归地沿着层次结构的路径最后上浮到文档对象（document object）。要禁止一个事件，你必须在事件句柄中把window.event.cancelBubble属性的值设为“true”。注意一点，除非事件被禁止了，否则，在沿着层次结构冒泡的过程中，它将会被所有注册了这个事件句柄的父级元素处理，即使它已经在子级元素中被处理过了。

禁止事件冒泡与禁止事件的默认行为是不同的。一些事件（例如：一个锚点上的onclick）具有默认行为。当一个锚点被单击时，它默认的行为是把当前窗口导航到其src属性所指定的URL。在事件句柄中返回“false”，或者设置window.event.returnValue属性为“false”，可以禁止事件的默认行为，但不能禁止事件的向上冒泡。要禁止向上冒泡，只有把window.event.returnValue属性设为“true”，相对应地，禁止事件冒泡的设置也并会禁止事件的默认行为。

最后一个例子是演示如何利用事件冒泡将一个共同的效果应用到一组元素上的。若你想把其中一个元素排除在这个效果之外，只要简单地把下面这行代码，从：

<SPAN class=Item>Ham</SPAN>

修改为：

<SPAN class=Item onmouseover="window.event.cancelBubble = true;"

    onmouseout="window.event.cancelBubble = true;">Ham</SPAN>

就可以了。

（例子的超级链接：

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_03.htm ）

进一步的思考：

在有些情况下，你可以让一个onmouseover事件只注册在一个对象上，考虑下面情况：

<DIV id=MyDiv>

<IMG id=MyImg>

</DIV>

假如你在img对象上移动鼠标指针，事件将会以下面的顺序激发：

MyDiv:: onmouseover

MyDiv:: onmouseout

MyImg:: onmouseover

把你的鼠标指针从img对象上移开将会再次激发MyDiv::onmouseover事件。

有些时候，网页制作者可能会想去探测鼠标指针何时移出一个div对象以实现某种

特别效果。这时，仅仅简单地设置onmouseout事件就并不足够了。为了使这种情况更容易解决，IE4.0标准为onmouseover和onmouseout事件增加了指示源对象（formElement）和目标对象(toElement)的属性，你可以综合使用这些属性和容器的方法来辨别鼠标指针何时移出了一个区域。

下面的例子演示了如何使用这些属性和方法：

（例子的超级链接：

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_04.htm）

<HTML>

<BODY id=Body>

<DIV id=OuterDiv style="width: 100px; height: 50px; background: red"

    onmouseover="over();" onmouseout="out();">

<IMG id=Img1>

<IMG id=Img2>

<IMG id=Img3>

</DIV>

<SCRIPT>

function over() {

    var s;

    s = "onmouseover: "+window.event.srcElement.id+" from: "+

window.event.fromElement.id+" to: "+window.event.toElement.id;

    alert(s);

function out() {

    var s;

    s = "onmouseout: "+window.event.srcElement.id+" from: "+

window.event.fromElement.id+" to: "+window.event.toElement.id;

    alert(s);

if (!(OuterDiv.contains(window.event.toElement)))

/*onmouseout事件并非由于鼠标指针从OuterDiv对象移进与其内部接壤的img对象而激发的，即：鼠标指针是真正的离开了整个OuterDiv包含的区域（译者注）*/

        alert("Out Now");

</SCRIPT>

</BODY>

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

禁止事件：

进一步的思考：

相关主题：