明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

DHTML對(duì)象模型（About the DHTML Object Model）(3)

發(fā)表時(shí)間：2024-01-28 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]禁止事件： 所有的事件都將向它們的父級(jí)元素冒泡，而且除非冒泡過程中事件被禁止了，否則事件將會(huì)被遞歸地沿著層次結(jié)構(gòu)的路徑最后上浮到文檔對(duì)象（document object）。要禁止一個(gè)事件，你必須在事件句柄中把window.event.cancelBubble屬性的值設(shè)為“true”。注意一點(diǎn)，除非...

禁止事件：
所有的事件都將向它們的父級(jí)元素冒泡，而且除非冒泡過程中事件被禁止了，否則事件將會(huì)被遞歸地沿著層次結(jié)構(gòu)的路徑最后上浮到文檔對(duì)象（document object）。要禁止一個(gè)事件，你必須在事件句柄中把window.event.cancelBubble屬性的值設(shè)為“true”。注意一點(diǎn)，除非事件被禁止了，否則，在沿著層次結(jié)構(gòu)冒泡的過程中，它將會(huì)被所有注冊(cè)了這個(gè)事件句柄的父級(jí)元素處理，即使它已經(jīng)在子級(jí)元素中被處理過了。

禁止事件冒泡與禁止事件的默認(rèn)行為是不同的。一些事件（例如：一個(gè)錨點(diǎn)上的onclick）具有默認(rèn)行為。當(dāng)一個(gè)錨點(diǎn)被單擊時(shí)，它默認(rèn)的行為是把當(dāng)前窗口導(dǎo)航到其src屬性所指定的URL。在事件句柄中返回“false”，或者設(shè)置window.event.returnValue屬性為“false”，可以禁止事件的默認(rèn)行為，但不能禁止事件的向上冒泡。要禁止向上冒泡，只有把window.event.returnValue屬性設(shè)為“true”，相對(duì)應(yīng)地，禁止事件冒泡的設(shè)置也并會(huì)禁止事件的默認(rèn)行為。

最后一個(gè)例子是演示如何利用事件冒泡將一個(gè)共同的效果應(yīng)用到一組元素上的。若你想把其中一個(gè)元素排除在這個(gè)效果之外，只要簡(jiǎn)單地把下面這行代碼，從：

<SPAN class=Item>Ham</SPAN>
修改為：

<SPAN class=Item onmouseover="window.event.cancelBubble = true;"
onmouseout="window.event.cancelBubble = true;">Ham</SPAN>
就可以了。

（例子的超級(jí)鏈接：

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

進(jìn)一步的思考：
在有些情況下，你可以讓一個(gè)onmouseover事件只注冊(cè)在一個(gè)對(duì)象上，考慮下面情況：

<DIV id=MyDiv>
<IMG id=MyImg>
</DIV>
假如你在img對(duì)象上移動(dòng)鼠標(biāo)指針，事件將會(huì)以下面的順序激發(fā)：

MyDiv:: onmouseover
MyDiv:: onmouseout
MyImg:: onmouseover
把你的鼠標(biāo)指針從img對(duì)象上移開將會(huì)再次激發(fā)MyDiv::onmouseover事件。

有些時(shí)候，網(wǎng)頁(yè)制作者可能會(huì)想去探測(cè)鼠標(biāo)指針何時(shí)移出一個(gè)div對(duì)象以實(shí)現(xiàn)某種

特別效果。這時(shí)，僅僅簡(jiǎn)單地設(shè)置onmouseout事件就并不足夠了。為了使這種情況更容易解決，IE4.0標(biāo)準(zhǔn)為onmouseover和onmouseout事件增加了指示源對(duì)象（formElement）和目標(biāo)對(duì)象(toElement)的屬性，你可以綜合使用這些屬性和容器的方法來(lái)辨別鼠標(biāo)指針何時(shí)移出了一個(gè)區(qū)域。

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

（例子的超級(jí)鏈接：

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事件并非由于鼠標(biāo)指針從OuterDiv對(duì)象移進(jìn)與其內(nèi)部接壤的img對(duì)象而激發(fā)的，即：鼠標(biāo)指針是真正的離開了整個(gè)OuterDiv包含的區(qū)域（譯者注）*/
{
alert("Out Now");
}
}
</SCRIPT>

</BODY>