Javascript Event事件中IE與標準DOM的比較
更新時間：2010年04月23日 17:36:57 作者：
說是IE與DOM的比較，其實還是瀏覽器之間的比較，眾多的瀏覽器中，IE獨樹一幟，并且占有大部分用戶市場，后來的標準DOM雖然不少優(yōu)點之處，但畢竟一般用戶不關心也不知道這些，代碼編寫過程中，往往需要兼顧多個瀏覽器。
1.事件流的區(qū)別
IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例：
<body>
<div>
<button>點擊這里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.事件偵聽函數的區(qū)別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
bCapture參數用于設置事件綁定的階段，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.事件對象定位(獲取)
IE：事件對象是window對象的一個屬性event，event只能在事件發(fā)生時訪問，事件處理函數執(zhí)行完畢，事件對象被銷毀。
示例：
document.onclick=function(){
alert(window.event.type);
}
DOM：event對象必須作為唯一的參數傳遞給事件處理函數，且必須為第一個參數。
示例：
document.onclick=function(){
alert(arguments[0].type);
}
4.獲取目標(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
5.阻止事件默認行為
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();
示例：
//屏蔽網頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
6.停止事件復制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
示例：
button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}
附一個代碼測試窗口：(感覺有些時候這種方式比alert()還好用)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例：
復制代碼 代碼如下:
<body>
<div>
<button>點擊這里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.事件偵聽函數的區(qū)別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
bCapture參數用于設置事件綁定的階段，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.事件對象定位(獲取)
IE：事件對象是window對象的一個屬性event，event只能在事件發(fā)生時訪問，事件處理函數執(zhí)行完畢，事件對象被銷毀。
示例：
復制代碼 代碼如下:
document.onclick=function(){
alert(window.event.type);
}
DOM：event對象必須作為唯一的參數傳遞給事件處理函數，且必須為第一個參數。
示例：
復制代碼 代碼如下:
document.onclick=function(){
alert(arguments[0].type);
}
4.獲取目標(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
5.阻止事件默認行為
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();
示例：
復制代碼 代碼如下:
//屏蔽網頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
6.停止事件復制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
示例：
復制代碼 代碼如下:
button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}
附一個代碼測試窗口：(感覺有些時候這種方式比alert()還好用)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
firefox firebug中文入門教程 腳本之家新年特別版
最近看了一篇文章感觸頗深，對于firebug作為腳本之家的編輯經?？吹牡?，但可悲的是沒怎么用過，不是不用那個而是不會用，剛好看了一篇基礎的文章特別整理下。2010-01-01
這篇文章主要為大家詳細介紹了js實現城市級聯(lián)菜單的2種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
My Desktop 桌面式 代碼2008-12-12
JS數組追加數組沒有現成的函數，這么多年我已經習慣了a.push.apply(a, b);這種自以為很酷的，不需要寫for循環(huán)的寫法，一直也沒遇到什么問題，直到今天我要append的b是個很大的數組時才遇到了坑。2014-06-06
ECMAScript?是一種標準化的腳本語言，它是?JavaScript?的規(guī)范。ECMAScript?2023?是?JavaScript?編程語言的更新，旨在帶來改進并使?JavaScript?程序可預測和可維護，這篇文章主要介紹了探索?ECMAScript?2023?中的新數組方法,需要的朋友可以參考下2023-12-12
JavaScript requestAnimationFrame動畫詳解
這篇文章主要為大家詳細介紹了JavaScript requestAnimationFrame動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要給大家介紹了關于js重寫alert事件的相關資料，這樣可以避免alert彈框標題出現網址的情況，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了滑動翻頁效果實現和移動端click事件問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
正則又叫規(guī)則或模式，是一個強大的字符串匹配工具。javascript通過RegExp類型來支持正則表達式，本文給大家介紹javascript類型系統(tǒng)之正則表達式，對js正則表達式相關知識感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了JS實現一個按鈕的方法,實例分析了使用js實現一個按鈕的功能與相關技巧,需要的朋友可以參考下2015-02-02