本文實(shí)例分析了javascript事件捕獲機(jī)制。分享給大家供大家參考，具體如下：

1.什么是事件冒泡？

在排序算法中，我們學(xué)過(guò)冒泡排序法，所謂冒泡就是讓底層的東西浮出水面，對(duì)于事件冒泡也同樣是如此，

下面我們來(lái)看一個(gè)例子來(lái)說(shuō)明什么是事件冒泡。

<div>
 <button>測(cè)試</button>
</div>
<script>
 $("div").bind("click",function(){alert("div")});
 $("button").bind("click",function(){alert("button"});
</script>

當(dāng)支持事件冒泡時(shí)，當(dāng)我們點(diǎn)擊"測(cè)試”按鈕時(shí)，首先會(huì)執(zhí)行的是alert("button")，固名思意：

事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。

當(dāng)div,button,html根元素都有事件時(shí)，事件執(zhí)行的順序?yàn)椋?/p>

button->div->html

2.什么是事件捕獲？

我們?cè)賮?lái)看事件捕獲，相對(duì)于事件捕獲，處理時(shí)間的順序與事件冒泡截然相反，同樣：

<div>
 <button>測(cè)試</button>
</div>
<script>
 $("div").bind("click",function(){alert("div")});
 $("button").bind("click",function(){alert("button"});
</script>

執(zhí)行這段代碼，首先會(huì)alert("div")，其次會(huì)alert("button")。我們明確事件捕獲的概念：

事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確。

同樣的如果button,div,html元素上都有綁定事件，那么事件的實(shí)行順序?yàn)椋?/p>

html->div->button

3.各個(gè)版本的瀏覽器對(duì)事件的處理機(jī)制？

(1)在DOM中，即支持事件冒泡，也支持事件捕獲，在W3C的標(biāo)準(zhǔn)中，認(rèn)為任何事件都是從事件捕獲出發(fā)，找到最終的結(jié)點(diǎn)，此后再進(jìn)行冒泡，會(huì)到根結(jié)點(diǎn)。

DOM中支持事件綁定的函數(shù)為：

addEventListener("事件名"，函數(shù)，userCapture);

對(duì)于userCapture參數(shù)，默認(rèn)為false，支持事件冒泡。
若在userCapture參數(shù)，為true時(shí)，支持事件捕獲。

(2)對(duì)于很多瀏覽器，都支持addEventListener方法，但是IE不支持！

(3) IE中的事件處理機(jī)制，IE中只支持事件冒泡，IE中有一個(gè)獨(dú)有的事件綁定方法

attachEvent方法，此方法有兩個(gè)參數(shù)：

attachEvent("事件名"，"函數(shù)名")

4.如何阻止事件的傳播？

無(wú)論是事件冒泡還是事件捕獲都是可以阻止的。

(1)首先在W3C中阻止事件的傳播方法為：stopPropagation(),在IE中，通過(guò)設(shè)置

cancelBubble=true;

(2) 如何阻止事件的默認(rèn)行為？在W3C標(biāo)準(zhǔn)中，使用preventDefault方法，在IE中通過(guò)設(shè)置

window.event.returnValue = false;

PS:關(guān)于javascript常用事件及相關(guān)說(shuō)明還可參考本站在線(xiàn)工具：

javascript事件與功能說(shuō)明大全：
http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript時(shí)間與日期操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論