EventUtil對象 之 跨瀏覽器的事件處理程式

　跨瀏覽器事件處理程式　

　最近在讀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對象封裝好的邏輯，及正確的引用
，就會對應不同的瀏覽器使用不同事件處理程式方法達到相容性。

　　　哇的一聲就哭出來，第一次寫博客，不知道用什麼方法添加代碼才能達到規範的格式(所有的代碼複製過來的時候都是小字體，靠右對齊的，所以得手動調試
，以及乾脆再敲一遍)，不過呢，感覺還是挺開心的！有什麼不對的地方希望大家能指出，我一定會學習及修改！

　　　學習是一種態度！-.-