前言，關(guān)于DOM事件的Bubbling和Capturing——  在瀏覽器解析事件的時(shí)候，有兩種觸發(fā)方式，一種叫做Bubbling(冒泡)，另外一種叫做Capturing(捕獲)。由上圖可以看出來(lái)，冒泡的方式效 果就是當(dāng)一個(gè)DOM元素的某事件例如click事件被fire時(shí)，依次它的父元素的click事件也被fire(觸發(fā))，一直傳遞到最頂層的body元素 為止。而捕獲的觸發(fā)方式正好相反，當(dāng)某個(gè)元素的click事件被觸發(fā)時(shí)，先從最頂層的body元素click事件被觸發(fā)開(kāi)始，一直傳遞到真正被觸發(fā)的元素 為止。 **************************************************************************** 這次我將討論W3C的標(biāo)準(zhǔn)DOM事件模型和IE獨(dú)立門戶的DOM事件模型到底有多少區(qū)別，首先我們可以回想一下目前大多數(shù)Js程序員習(xí)慣如何綁定事件到 DOM元素上，最常見(jiàn)的就是obj.onclick=handler這種方式(更惡劣的是在Html代碼的元素標(biāo)簽中直接加上onclick屬性，完全沒(méi) 達(dá)到視圖和動(dòng)作分開(kāi)的原則)。我們暫時(shí)稱這種方式的事件添加為Traditional(傳統(tǒng)方式)吧，IE有自己的IE Event Module，而火狐等瀏覽器則遵循的W3C方式的Event Module，下面看看這三者各自的優(yōu)缺點(diǎn)在哪里—— 1、Traditional Module 傳統(tǒng)方式的事件模型即直接在DOM元素上綁定事件處理器，例如— window.onload=function(){…} obj.onmouseover=function(e){…} obj.onclick=function(){…} 首先這種方式是無(wú)論在IE還是Firefox等其他瀏覽器上都可以成功運(yùn)行的通用方式。這便是它最大的優(yōu)勢(shì)了，而且在Event處理函數(shù)內(nèi)部的this變量無(wú)一例外的都只想被綁定的DOM元素，這使得Js程序員可以大大利用this關(guān)鍵字做很多事情。 至于它的缺點(diǎn)也很明顯，就是傳統(tǒng)方式只支持Bubbling，而不支持Capturing，并且一次只能綁定一個(gè)事件處理器在DOM元素上，無(wú)法實(shí)現(xiàn)多 Handler綁定。最后就是function參數(shù)中的event參數(shù)只對(duì)非IE瀏覽器有效果(因?yàn)镮E瀏覽器有特制的window.event)。 2、W3C (Firefox.e.g) Event Module Firefox等瀏覽器很堅(jiān)決的遵循W3C標(biāo)準(zhǔn)來(lái)制定瀏覽器事件模型，使用addEventListener和removeEventListener兩個(gè)函數(shù)，看幾個(gè)例子— window.addEventListener(‘load’,function(){…},false); document.body.addEventListener(‘keypress’,function{…},false); obj.addEventListener(‘mouseover’,MV,true); function MV(){…} addEventListener帶有三個(gè)參數(shù)，第一個(gè)參數(shù)是事件類型，就是我們熟知的那些事件名字去掉前面的’on’，第二個(gè)參數(shù)是處理函數(shù)，可以直接給函數(shù)字面量或者函數(shù)名，第三個(gè)參數(shù)是boolean值，表示事件是否支持Capturing。 W3C的事件模型優(yōu)點(diǎn)是Bubbling和Capturing都支持，并且可以在一個(gè)DOM元素上綁定多個(gè)事件處理器，各自并不會(huì)沖突。并且在處理函數(shù)內(nèi) 部，this關(guān)鍵字仍然可以使用只想被綁定的DOM元素。另外function參數(shù)列表的第一個(gè)位置(不管是否顯示調(diào)用)，都永遠(yuǎn)是event對(duì)象的引 用。 至于它的缺點(diǎn)，很不幸的就只有在市場(chǎng)份額最大的IE瀏覽器下不可使用這一點(diǎn)。 3、IE Event Module IE自己的事件模型跟W3C的類似，但主要是通過(guò)attachEvent和detachEvent兩個(gè)函數(shù)來(lái)實(shí)現(xiàn)的。依舊看幾個(gè)例子吧— window.attachEvent(‘onload’,function(){…}); document.body.attachEvent(‘onkeypress’,myKeyHandler); 可以發(fā)現(xiàn)它跟W3C的區(qū)別是沒(méi)有第三個(gè)參數(shù)，而且第一個(gè)表示事件類型的參數(shù)也必須把’on’給加上。這種方式的優(yōu)點(diǎn)就是能綁定多個(gè)事件處理函數(shù)在同一個(gè)DOM元素上。 至于它的缺點(diǎn)，為什么如今在實(shí)際開(kāi)發(fā)中很少見(jiàn)呢？首先IE瀏覽器本身只支持Bubbling不支持Capturing；而且在事件處理的function 內(nèi)部this關(guān)鍵字也無(wú)法使用，因?yàn)閠his永遠(yuǎn)都只想window object這個(gè)全局對(duì)象。要想得到event對(duì)象必須通過(guò)window.event方式，最后一點(diǎn)，在別的瀏覽器中，它顯然是無(wú)法工作的。 最后我在推薦兩個(gè)必須知道的IE和W3C標(biāo)準(zhǔn)的區(qū)別用法吧— 1、當(dāng)我們需要阻止瀏覽器某DOM元素的默認(rèn)行為的時(shí)候在W3C下調(diào)用e.preventDefault()，而在IE下則通過(guò)window.event.returnValue＝false來(lái)實(shí)現(xiàn)。 2、當(dāng)我們要阻止事件冒泡的時(shí)候，在W3C標(biāo)準(zhǔn)里調(diào)用e.stopPropagation()，而在IE下通過(guò)設(shè)置window.event.cancelBubble=true來(lái)實(shí)現(xiàn)。 |
|
|
