首先，此文不討論繁瑣細(xì)節(jié)，但是考慮到讀者的心靈感受，本著以積極向上的心態(tài)，在此還是會(huì)列舉示例說明。

​標(biāo)題為理解DOM事件，那么在此拿一個(gè)簡單的點(diǎn)擊事件為例，希望大家看到這個(gè)例子后能觸類旁通。
最初我們給頁面實(shí)現(xiàn)點(diǎn)擊，就像下面這樣的簡單操作。
先定義一個(gè)塊如<div id="weiyuzhou">微宇宙</div>，之后在<script type="text/javascript"></script>內(nèi)部實(shí)現(xiàn)id為weiyuzhou的點(diǎn)擊事件，如下代碼所示：

var wyz = document.getElementById('weiyuzhou');
wyz.onclick = function () {
　　confirm(arguments.length)
}

確保上面這些步驟都沒問題的話，我們才可以繼續(xù)的往下走，然后我們?cè)贗E瀏覽器(低版本)看到彈出0，確切的說，IE8以下(包含IE8)的彈出0，反之彈出1。接著我在firefox瀏覽器看到彈出1。也就是說在IE8以下版本事件的觸發(fā)不存在于函數(shù)的作用域內(nèi)部，是不是說IE8以下的事件觸發(fā)發(fā)生在全局作用域中，此處留個(gè)懸念，但是，可以肯定的是IE8以下事件的方法并沒有這個(gè)Event參數(shù)，也就是說arguments的長度為0，如下視圖5所示：

于是，我們看firefox瀏覽器窗口彈出1，說明事件存在于函數(shù)內(nèi)部，再次證明方法的內(nèi)部數(shù)組arguments長度為1，并且是可枚舉的變量，也可以說可寫，如下視圖所示。

如果，你還是不明白其中的原理，你不防去看一下《web前端開發(fā)修煉之道》書上第169頁，然后再回過頭來看此處文章摘要，可能會(huì)讓你更加深層次的了解書中的內(nèi)容。

接下來，我們?cè)撛趺崔k呢，我們肯定不能讓IE和firefox返回的事件輸出不相同，那么如何讓IE和firefox下彈出的內(nèi)容都一樣。

銜接上一段內(nèi)容，下面給點(diǎn)擊函數(shù)的內(nèi)部設(shè)置一個(gè)參數(shù)，參數(shù)名為e，然后在IE和firefox瀏覽器下面同時(shí)觸發(fā)點(diǎn)擊事件，我們看到firefox下面顯示e為鼠標(biāo)事件[objectMouseEvent]，IE8下報(bào)錯(cuò)，彈出錯(cuò)誤信息未定義undefined。此時(shí)你要問我錯(cuò)在哪里，咱們回到剛剛的那句話‘此處留個(gè)懸念'進(jìn)行分析，IE8以下的瀏覽器的事件是不是發(fā)生在全局作用域中，從視圖5-02所示看到有一個(gè)global全局對(duì)象，我們可以對(duì)global展開搜索，global的繼承的方法有一個(gè)event事件，找到了IE8的專有事件方法window繼承event，于是我們對(duì)這個(gè)參數(shù)e設(shè)置為window.event進(jìn)行一個(gè)調(diào)試，目前我們?cè)贗E8下面看到返回了一個(gè)事件[objectevent]，如圖所示。

想必你一定發(fā)現(xiàn)了IE8和firefox瀏覽器下對(duì)話框的事件返回值各不不同，IE8的對(duì)話框?yàn)閇objectevent]，firefox的對(duì)話框?yàn)閇objectMouseEvent]，那我們?cè)趺醋孖E8和firefox下的返回值都相同呢？

看到這里，你的心里是不是有點(diǎn)小沮喪，挖坑挖了這么久了，怎么還沒有看到水流出來，別急，正題才剛剛開始，咱們不閑聊，繼續(xù)圍繞正題展開分析，通過剛剛的返回值，我們繼續(xù)使用斷點(diǎn)的方法尋找能夠?qū)崿F(xiàn)IE和firefox的返回值的共同點(diǎn)。

經(jīng)由以上分析，我們查找發(fā)現(xiàn)firefox下的event有我們需要的方法名可以被調(diào)用，當(dāng)然，我們查找發(fā)現(xiàn)IE8下面的srcElement也有我們所需的方法名可以被調(diào)用，于是乎，呵呵！看到這里你的內(nèi)心是不是有點(diǎn)小激動(dòng)，一步步排除，最后發(fā)現(xiàn)也沒有什么難的?；氐秸}，現(xiàn)在我們聲明一個(gè)變量vare_child=e.srcElement||e.target;然后我們?cè)贗E8和firefox瀏覽器上看到對(duì)話框信息都為[objectHTMLDivElement]，如圖所示。

現(xiàn)在我們解決了不同瀏覽器的返回值不同的問題，也就是說解決了兼容的問題，這只是冰上一角。

下面我們要解決實(shí)現(xiàn)窗口的容器觸發(fā)事件，主要是基于上面的結(jié)構(gòu)進(jìn)行的一次分析。

當(dāng)你有了上面基礎(chǔ)的話，下面的內(nèi)容相對(duì)于上面而言比較簡單一點(diǎn)。

還是以上一個(gè)頁面的塊為例，現(xiàn)在我繼續(xù)往塊<divid="weiyuzhou">微宇宙</div>增加一個(gè)子容器，這個(gè)子容器為行內(nèi)元素<spanid='coz'>koringz</span>，取id名為coz，然后給這個(gè)元素也加一個(gè)點(diǎn)擊事件代碼同上函數(shù)，為了能區(qū)別開文本內(nèi)容之間的差異。

當(dāng)我分別在IE8和firefox下點(diǎn)擊容器的內(nèi)容，出現(xiàn)了怪異的情況，在firefox瀏覽器的窗口上點(diǎn)擊時(shí)，點(diǎn)擊中文文本內(nèi)容彈出來對(duì)話框‘微宇宙'，我再點(diǎn)擊koringz時(shí)，發(fā)現(xiàn)彈出了二次對(duì)話框，彈出內(nèi)容都為'koringz'，那是因?yàn)槲尹c(diǎn)擊子容器的時(shí)候觸發(fā)了上一層的點(diǎn)擊行為，如何解決點(diǎn)擊koringz彈出二次對(duì)話框的問題，了解一點(diǎn)js的程序員都知道這是冒泡事件。

那么在firefox能夠清除冒泡事件的是event下的stopPropagation，于是我們給第二次點(diǎn)擊事件函數(shù)代碼塊之后面加一行代碼e.stopPropagation();之后再點(diǎn)擊koringz發(fā)現(xiàn)彈出一次'koringz'。如圖所示

接下來在IE8下面測試一下，發(fā)現(xiàn)在IE8瀏覽器點(diǎn)擊也彈出二次，解決IE8的停止冒泡事件為cacelBubble，且我們只需要給cacelBubble設(shè)置為true即可。
因?yàn)镮E8下global包含的event屬性cacelBubble不是一個(gè)方法，而是一個(gè)輸出布爾值的對(duì)象，所以這個(gè)和firefox有所不同，只是firefox把此事件封裝成方法而已。好了，現(xiàn)在我們給第二次點(diǎn)擊的事件代碼塊之后再加一行代碼e.cancelBubble=true;然后在IE8瀏覽器下測試，之后再點(diǎn)擊koringz發(fā)現(xiàn)也彈出一次。如圖所示

注意上面的停止冒泡的事件的代碼可以根據(jù)瀏覽器的不同分開來寫，如何分開寫，我們查看IE8瀏覽器下面的document發(fā)現(xiàn)存在對(duì)象all，而在firefox卻沒有這個(gè)all屬性，這也就是說document.all是IE8版本下面獨(dú)有的一個(gè)屬性。通過它我們可以區(qū)分瀏覽器的冒泡事件。

到目前為止，我們解決了窗口的冒泡事件，接下來，我們要解決一個(gè)事件因被多人定義而覆蓋原函數(shù)的問題。也可能是說某公司之前的工作人員添加了此事件，后來新員工接手項(xiàng)目后添加修改此事件而覆蓋了原事件的執(zhí)行所產(chǎn)生的問題。也就是說給當(dāng)前id多次添加此類事件都不會(huì)覆蓋此事件的原函數(shù)執(zhí)行。

在firefox下的window包含有addEventListener(type,listener,useCapture)的方法，隨后我們?cè)?lt;scripttype="text/javascript"></script>內(nèi)部定義此監(jiān)聽事件domElement.addEventListener('click',function(e){confirm(e+'e')},false);，接著在firefox瀏覽器點(diǎn)擊內(nèi)容彈出二次，最后一次彈出為[objectMouseEvent]e，后面多了一個(gè)e，這是我有意加上用以區(qū)別的。如圖所示。

接下來在IE8下測試發(fā)現(xiàn)addEventListener錯(cuò)誤，但是看到window下有此類方法（嘗試了一下，原來此類方法在IE9以上版本是可以被支持），IE8同時(shí)還有一個(gè)attachEvent(event,pdisp)，那么我們?cè)O(shè)置監(jiān)聽事件wyz.attachEvent('onclick',function(e){confirm(e+'e')}),注：event為'onclick'，緊接著在IE8下點(diǎn)擊發(fā)現(xiàn)可彈出二次，最后一次[objectMouseEvent]e。此時(shí)on('click',pdisp)和attachEvent(event,pdisp)可以共同使用。

綜上所述，我們解決了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用。

最新評(píng)論