javascript從入門到精通光盤資源第9章dom模型

DOM事件模型

本講大綱：1、事件流

支持網(wǎng)站：2、主流瀏覽器的事件模型3、事件對(duì)象4、注冊(cè)與移除事件監(jiān)聽(tīng)器事件流 DOM（文檔對(duì)象模型）結(jié)構(gòu)是一個(gè)樹型結(jié)構(gòu)，當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì)在元素結(jié)點(diǎn)與根結(jié)點(diǎn)之間的路徑傳播，路徑所經(jīng)過(guò)的結(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過(guò)程可稱為DOM事件流。

主流瀏覽器的事件模型 直到DOMLevel3中規(guī)定后，多數(shù)主流瀏覽器才陸陸續(xù)續(xù)支持DOM標(biāo)準(zhǔn)的事件處理模型——捕獲型與冒泡型。 目前除IE瀏覽器外，其它主流的Firefox，Opera，Safari都支持標(biāo)準(zhǔn)的DOM事件處理模型。IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，這點(diǎn)對(duì)于開發(fā)者來(lái)說(shuō)也是有好處的，只使用DOM標(biāo)準(zhǔn)，IE都共有的事件處理方式才能有效的跨瀏覽器。 冒泡型事件(Bubbling)：從DOM樹型結(jié)構(gòu)上理解，就是事件由葉子結(jié)點(diǎn)沿祖先結(jié)點(diǎn)一直向上傳遞直到根結(jié)點(diǎn)；從瀏覽器界面視圖HTML元素排列層次上理解就是事件由具有從屬關(guān)系的最確定的目標(biāo)元素一直傳遞到最不確定的目標(biāo)元素。 捕獲型事件(Capturing)：NetscapeNavigator的實(shí)現(xiàn)，它與冒泡型剛好相反，由DOM樹最頂層元素一直到最精確的元素。 DOM標(biāo)準(zhǔn)事件模型：因?yàn)閮蓚€(gè)不同的模型都有其優(yōu)點(diǎn)和解釋，DOM標(biāo)準(zhǔn)支持捕獲型與冒泡型，可以說(shuō)是它們兩者的結(jié)合體。它可以在一個(gè)DOM元素上綁定多個(gè)事件處理器，并且在處理函數(shù)內(nèi)部，this關(guān)鍵字仍然指向被綁定的DOM元素，另外處理函數(shù)參數(shù)列表的第一個(gè)位置傳遞事件event對(duì)象。 首先是捕獲式傳遞事件，接著是冒泡式傳遞，所以，如果一個(gè)處理函數(shù)既注冊(cè)了捕獲型事件的監(jiān)聽(tīng)，又注冊(cè)冒泡型事件監(jiān)聽(tīng)，那么在DOM事件模型中它就會(huì)被調(diào)用兩次。事件對(duì)象 在IE瀏覽器中事件對(duì)象是window對(duì)象的一個(gè)屬性event，并且event對(duì)象只能在事件發(fā)生時(shí)候被訪問(wèn)，所有事件處理完后，該對(duì)象就消失了。而標(biāo)準(zhǔn)的DOM中規(guī)定event必須作為惟一的參數(shù)傳給事件處理函數(shù)。故為了實(shí)現(xiàn)兼容性，通常采用下面的方法：functionsomeHandle(event){if(window.event)event=window.event；} 說(shuō)明： 在兩種瀏覽器處理事件中，type屬性是各種瀏覽器所兼容的，他表示獲取的事件類型，返回字符串。 在檢測(cè)Shift，Alt，Ctrl三個(gè)鍵時(shí)，兩種瀏覽器事件使用的方法也是一樣的。 在IE中，事件的對(duì)象包含在event的srcElement屬性中，而在標(biāo)準(zhǔn)的DOM瀏覽器中，對(duì)象包含在target屬性中。 為了處理兩種瀏覽器兼容性，舉例如下：functionhandle(oEvent){if(window.event)oEvent=window.event;

//處理兼容性，獲得事件對(duì)象varoTarget;if(oEvent.srcElement)

//處理兼容性，獲取事件目標(biāo)oTarget=oEvent.srcElement;elseoTarget=oEvent.target;alert(oTarget.tagName);

//彈出目標(biāo)的標(biāo)記名稱}window.onload=function(){varoImg=document.getElementsByTagName(“img”)[0];oImg.onclick=handle;}注冊(cè)與移除事件監(jiān)聽(tīng)器 1，IE下注冊(cè)多個(gè)事件監(jiān)聽(tīng)器與移除監(jiān)聽(tīng)器方法 E瀏覽器中HTML元素有個(gè)attachEvent方法允許外界注冊(cè)該元素多個(gè)事件監(jiān)聽(tīng)器，例如：element.attachEvent(‘onclick’,observer); 要移除先前注冊(cè)的事件的監(jiān)聽(tīng)器，調(diào)用element的detachEvent方法即可，參數(shù)相同，例如：element.detachEvent(‘onclick’,observer); 2，DOM標(biāo)準(zhǔn)下注冊(cè)多個(gè)事件監(jiān)聽(tīng)器與移除監(jiān)聽(tīng)器方法 實(shí)現(xiàn)DOM標(biāo)準(zhǔn)的瀏覽器與IE瀏覽器中注冊(cè)元素事件監(jiān)聽(tīng)器方式有所不同，它通過(guò)元素的addEventListener方法注冊(cè)，該方法既支持注冊(cè)冒泡型事件處理，又支持捕獲型事件處理。 element.addEventListener(‘click’,observer,useCapture); addEventListener方法接受三個(gè)參數(shù)。第一個(gè)參數(shù)是事件名稱，值得注意的是，這里事件名稱與IE的不同，事件名稱是沒(méi)‘on’開頭的；第二個(gè)參數(shù)observer是回調(diào)處理函數(shù)；第三個(gè)參數(shù)注明該處理回調(diào)函數(shù)是在事件傳遞過(guò)程中的捕獲階段被調(diào)用還是冒泡階段被調(diào)用，默認(rèn)true為捕獲階段。 移除已注冊(cè)的事件監(jiān)聽(tīng)器調(diào)用element的removeEventListener即可，參數(shù)不變。 element.removeEventListener(‘click’,observer,useCapture);注冊(cè)與移除事件監(jiān)聽(tīng)器

3、直接在DOM節(jié)點(diǎn)上加事件 （1）如何取消瀏覽器事件的傳遞與事件傳遞后瀏覽器的默認(rèn)處理 取消事件傳遞是指，停止捕獲型事件或冒泡型事件的進(jìn)一步傳遞。例如上圖中的冒泡型事件傳遞中，在body處理停止事件傳遞后，位于上層的document的事件監(jiān)聽(tīng)器就不再收到通知，不再被處理。 事件傳遞后的默認(rèn)處理是指，通常瀏覽器在事件傳遞并處理完后會(huì)執(zhí)行與該事件關(guān)聯(lián)的默認(rèn)動(dòng)作（如果存在這樣的動(dòng)作）。 （2）取消瀏覽器的事件傳遞: 在IE下，通過(guò)設(shè)置event對(duì)象的cancelBubble為true即可。functionsomeHandle(){window.event.cancelBubble=true;} DOM標(biāo)準(zhǔn)通過(guò)調(diào)用event對(duì)象的stopPropagation()方法即可。functionsomeHandle(event){event.stopPropagation();} 因些，跨瀏覽器的停止事件傳遞的方法是：functionsomeHandle(event){event=event||window.event;if(event.stopPropagation)event.stopPropagation();elseevent.cancelBubble=true;}注冊(cè)與移除事件監(jiān)聽(tīng)器（3）取消事件傳遞后的默認(rèn)處理在IE下，通過(guò)設(shè)置event對(duì)象的returnValue為false即可。functionsomeHandle(){window.event.returnValue=false;}DOM標(biāo)準(zhǔn)通過(guò)調(diào)用event對(duì)象的preventDefault()方法即可。functionsomeHandle(event){event.preventDefault();}因些，跨瀏覽器的取消事件傳遞后的默認(rèn)處理方法是：functionsome