??事件是JavaScript的重要組成部分,但是兼容問題一直困擾我們的程序員同學,整理跨瀏覽器的事件相關內容,供大家參考,本文是學習高程3后總結.
事件分類
DOM 0 級 事件
??通俗一點就是采用 "on" + eventType 的方式為元素綁定事件,寫法簡單,具有跨瀏覽器的優勢,現代瀏覽器全部支持,使用DOM0級方法指定事件處理程序被人為是元素的方法,事件處理程序是在元素的作用域中運行的,程序中的this指向被綁定事件的元素. <br />DOM 2 級 事件
??定義了兩種方法,用于事件的添加和刪除處理,
即:?addEventListener( type, handler, boolean )
???removeEventLisrener( type, handler, boolean ),
第三個參數為boolean值,如果為true表示在事件的捕獲階段調用事件處理程序,反之在時在冒泡階段調用事件處理程序. 通過addEventListener()添加的事件只能通過removerEventListener()來移除.addEventListener()主要的好處是能夠添加多個事件,并且多個事件的執行書序是按照書寫的順序執行 <br />IE 事件
?? IE中實現了類似于DOM2 級中的方法,綁定事件方法attachEvent(),移除事件detachEvent(), 都接收兩個參數事件名稱和事件處理程序,區別于DOM2級事件,IE中的事件名稱需要在事件名前面加一個"on",利用detachEvent()移除事件時需要傳入相同的參數才行. !注意:通過這個方法綁定事件處理程序是在全局中運行,this執行window.并且,當使用attachEvent()多次為同一對象綁定事件時,事件的程序代碼的書寫順序是相反的.
跨瀏覽器事件封裝
var EventUtil = {
// 1.添加事件處理程序 參數1: 事件添加元素, 參數2: 事件類型, 參數3: 事件處理程序
addHandler: function ( ele, type, handler) {
// DOM2級方法
if ( ele.addEventListener ) {
// 第三個參數 false 表示在冒泡階段調用處理程序,
ele.addEventListener( type, handler, false);
// IE事件方法
} else if ( ele.attachEvent ) {
ele.attachEvent( "on" + type, handler);
// DOM 0級事件方法法
} else {
ele["on" + type] = handler;
}
},
// 2.事件參數對象
getEvent: function ( event ) {
return event ? event : window.event;
}
// 3.事件目標
getTarget: function ( event ) {
return event.target || event.srcElement;
}
// 4.阻止默認行為
preventDefault: function ( event ) {
if ( event.preventDefault ) {
event.preventDefault();
} else {
// 簡單的寫法可以是 return false
event.returnValue = false;
}
}
// 5.解綁事件
removeHandler: function ( ele, type, handler ) {
// DOM2 級事件解綁
if ( ele.removeEventListener ) {
ele.removeHandler( type, handler, false );
} else if ( ele.detachEvent ) {
ele.detachEvent( "on" + type, handler );
} else {
ele.[ "on" + type ] = null;
}
}
// 6.阻止冒泡
stopPropagation: function ( event ) {
// DOM 事件
if ( event.stopPropagation ) {
event.stopPropagation();
// IE
} else {
event.cancelBubble = true;
}
}
}
