最近在讀javascript高級程式設計，讀第十三章的時候有感。 開發中經常考慮的事情就是相容性，樣式相容，腳本相容等~~ 經常考慮的對象常為： DOM 與 IE （這裡的dom對象我理解為ie9，Firefox，chrome，safari，opera以上。IE則為ie8及以下） 首先介紹 事件流： ...
跨瀏覽器事件處理程式
最近在讀javascript高級程式設計，讀第十三章的時候有感。
開發中經常考慮的事情就是相容性，樣式相容，腳本相容等~~
經常考慮的對象常為： DOM 與 IE （這裡的dom對象我理解為ie9，Firefox，chrome，safari，opera以上。IE則為ie8及以下）
首先介紹 事件流：描述的是從頁面接收事件的順序。分為事件冒泡與事件捕獲。（ie9，Firefox，chrome，safari，opera支持DOM事件流。ie8及更早版本不支持DOM事件流）.
事件處理程式：
1.html事件處理程式（即在html元素上執行事件，缺點是時差問題。比如點擊事件，當事件處理程式不具備執行條件時，指頁面剛渲染元素，用戶就點擊元素，可能會報錯）
2.
2.1
2.1.1 DOM0級事件處理
var btn = document.getElementById("mybtn");
btn.onclick = function(){
alert(this.id); //"mybtn" this可以訪問元素的任何屬性和方法
}；
btn.onclick = null; //刪除事件處理程式
2.1.2 DOM2級事件處理程式
var btn = document.getElementById("mybtn");
//添加事件程式
btn.addEventListener("click",function(){alert(this.id)},falsle);
//移除事件程式 註意：移除時候的第二個參數如果為匿名函數，則會無效
var handler = function(){alert(this.id)};
btn.addEventListener("click",handler,falsle);
btn.removeEventListener("click",handler,falsle);
DOM0級事件處理程式的缺點：前面添加的事件處理程式會被後面添加的覆蓋
DOM2級事件處理程式的優點：可以添加多個事件處理程式，會一一執行
2.2 IE事件處理程式
支持IE事件程式的只有ie和opera
var myDiv = document.getElementById("mydiv");
//添加事件程式 註意attachEvent()只有兩個參數，第一個事件參數需要加 on
btn.attachEvent("onclick",function(){
alert(this.id)； //mydiv
alert(this === window); //true 牢記這一點 ，在跨瀏覽器代碼時，這點很重要
});
//attachEvent()也可以綁定對個事件程式
//移除事件程式 detachEvent()， 和dom一樣 第二個參數不可為匿名函數
var handler = function(){alert(this.id)};
btn.attachEvent("onclick",handler,falsle);
btn.detachEvent("onclick",handler,falsle);
重點：跨瀏覽器事件處理程式
對象：EventUtil
方法：addHandler()、removeHandler() 職責為視情況來使用dom或者ie事件處理程式
方法的參數：要操作的元素，事件名稱，事件處理程式
寫法：
var myDiv = document.getElementById("mydiv");
var handler = function(){alert("clicked")};
var EventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
//ie9，opera，firefox。。及以上高瀏覽器的dom2級事件處理程式
element.addEventListener(type,handler,false);
}else{
//i8，opera及以下低版本的dom2級事件處理程式
element.attachEvent("on"+type,handler)
};
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else{
element.detachEvent("on"+type,handler)
};
};
};
//使用
//綁定事件處理程式
EventUtil.addHandler(myDiv,"click",handler);
//移除事件處理程式
EventUtil.removeHandler(myDiv,"click",handler);
總結：在需要考慮跨瀏覽器的事件處理程式的時候，只需添加上面介紹的EventUtil對象封裝好的邏輯，及正確的引用
，就會對應不同的瀏覽器使用不同事件處理程式方法達到相容性。
哇的一聲就哭出來，第一次寫博客，不知道用什麼方法添加代碼才能達到規範的格式(所有的代碼複製過來的時候都是小字體，靠右對齊的，所以得手動調試
，以及乾脆再敲一遍)，不過呢，感覺還是挺開心的！有什麼不對的地方希望大家能指出，我一定會學習及修改！
學習是一種態度！-.-
