Javascript Event事件中IE與標(biāo)準(zhǔn)DOM的比較
更新時(shí)間：2010年04月23日 17:36:57 作者：
說是IE與DOM的比較，其實(shí)還是瀏覽器之間的比較，眾多的瀏覽器中，IE獨(dú)樹一幟，并且占有大部分用戶市場(chǎng)，后來的標(biāo)準(zhǔn)DOM雖然不少優(yōu)點(diǎn)之處，但畢竟一般用戶不關(guān)心也不知道這些，代碼編寫過程中，往往需要兼顧多個(gè)瀏覽器。
1.事件流的區(qū)別
IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例：
<body>
<div>
<button>點(diǎn)擊這里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.事件偵聽函數(shù)的區(qū)別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數(shù)
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數(shù)
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
bCapture參數(shù)用于設(shè)置事件綁定的階段，true為捕獲階段，false為冒泡階段。
示例代碼：
function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false);
}else if(object.attachEvent){ //IE
object.attachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=fnHandler;
}
}
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false);
}else if(object.detachEvent){ //IE
object.detachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=null;
}
}
addEventHandler(oDiv,"click",function(){alert("clicked")});
3.事件對(duì)象定位(獲取)
IE：事件對(duì)象是window對(duì)象的一個(gè)屬性event，event只能在事件發(fā)生時(shí)訪問，事件處理函數(shù)執(zhí)行完畢，事件對(duì)象被銷毀。
示例：
document.onclick=function(){
alert(window.event.type);
}
DOM：event對(duì)象必須作為唯一的參數(shù)傳遞給事件處理函數(shù)，且必須為第一個(gè)參數(shù)。
示例：
document.onclick=function(){
alert(arguments[0].type);
}
4.獲取目標(biāo)(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
5.阻止事件默認(rèn)行為
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();
示例：
//屏蔽網(wǎng)頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
6.停止事件復(fù)制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
示例：
button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}
附一個(gè)代碼測(cè)試窗口：(感覺有些時(shí)候這種方式比alert()還好用)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例：
復(fù)制代碼 代碼如下:
<body>
<div>
<button>點(diǎn)擊這里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.事件偵聽函數(shù)的區(qū)別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數(shù)
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數(shù)
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
bCapture參數(shù)用于設(shè)置事件綁定的階段，true為捕獲階段，false為冒泡階段。
示例代碼：
復(fù)制代碼 代碼如下:
function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false);
}else if(object.attachEvent){ //IE
object.attachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=fnHandler;
}
}
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false);
}else if(object.detachEvent){ //IE
object.detachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=null;
}
}
addEventHandler(oDiv,"click",function(){alert("clicked")});
3.事件對(duì)象定位(獲取)
IE：事件對(duì)象是window對(duì)象的一個(gè)屬性event，event只能在事件發(fā)生時(shí)訪問，事件處理函數(shù)執(zhí)行完畢，事件對(duì)象被銷毀。
示例：
復(fù)制代碼 代碼如下:
document.onclick=function(){
alert(window.event.type);
}
DOM：event對(duì)象必須作為唯一的參數(shù)傳遞給事件處理函數(shù)，且必須為第一個(gè)參數(shù)。
示例：
復(fù)制代碼 代碼如下:
document.onclick=function(){
alert(arguments[0].type);
}
4.獲取目標(biāo)(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
5.阻止事件默認(rèn)行為
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();
示例：
復(fù)制代碼 代碼如下:
//屏蔽網(wǎng)頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
6.停止事件復(fù)制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
示例：
復(fù)制代碼 代碼如下:
button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}
附一個(gè)代碼測(cè)試窗口：(感覺有些時(shí)候這種方式比alert()還好用)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹
- 一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
- JavaScript DOM 添加事件
- javascript 刪除dom對(duì)象的事件函數(shù)代碼
- DOM3中的js textInput文本事件
- JS、CSS以及img對(duì)DOMContentLoaded事件的影響
- Javascript封裝DOMContentLoaded事件實(shí)例
- JavaScript DOM事件(筆記)
- 關(guān)于javascript DOM事件模型的兩件事
- js學(xué)習(xí)總結(jié)之dom2級(jí)事件基礎(chǔ)知識(shí)詳解
相關(guān)文章
微信小程序?qū)崿F(xiàn)打開并下載服務(wù)器上面的pdf文件到手機(jī)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開并下載服務(wù)器上面的pdf文件到手機(jī)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-05-05
JS數(shù)組push、unshift、pop、shift方法的實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS數(shù)組push、unshift、pop、shift方法,結(jié)合實(shí)例形式分析了JS數(shù)組push、unshift、pop、shift方法針對(duì)數(shù)組添加、刪除等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
千萬別錯(cuò)過的JavaScript?sort方法使用指南
sort方法在我們的日常開發(fā)中是經(jīng)常使用的，sort方法一般是用來對(duì)數(shù)組進(jìn)行排序的，但是你是否知道sort方法默認(rèn)是按什么方式排序的呢？下面就和我一起來深入了解sort方法吧2023-05-05
這里說的js跨域是指通過js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信，比如用ajax向一個(gè)不同的域請(qǐng)求數(shù)據(jù)，或者通過js獲取頁面中不同域的框架中(iframe)的數(shù)據(jù)。只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域。2014-04-04
純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了詳解JavaScript 中的批處理和緩存，幫助大家完成需求，更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
JS實(shí)用案例之輸入智能提示(打字機(jī)輸出效果)
最近在項(xiàng)目需求中遇到之前沒有做過的功能,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)用案例之輸入智能提示,文中通過實(shí)例代碼介紹的非常詳細(xì),打字機(jī)輸出效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過程
這篇文章主要介紹了JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過程,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果詳解
這篇文章主要介紹了原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)圖片3D旋轉(zhuǎn)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02