js事件處理程序?qū)W習(xí)與總結(jié)

（1）html事件處理程序，使用一個(gè)與相應(yīng)事件處理程序同名的HTML特性來指定，可以定義事件處理程序是可以包含要執(zhí)行的具體動作，也可以調(diào)用頁面其他地方定義的腳本函數(shù)，但這種方法就是把javascript與html混寫，一般開發(fā)，不建議使用，比如：

      <input type=”button” value=”提交” onsumit=”alert(提交了？)“>

（2）javascript指定事件處理程序

            這種方法，必須先取得一個(gè)操作對象的引用。

      1）DOM0級事件處理程序

              例如：

          var spanobj = document.querySelector('span');

          spanobj.onclick=function(){

          alert("span元素被選中");

        } 

      spanobj.onclick=null;刪除事件處理程序，再單擊都不會有效果啦。

通過文檔對象取得了一個(gè)標(biāo)簽元素的引用，然后對它指定事件處理程序，這樣的一種形式就是DOM0事件處理程序。以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

      此方法優(yōu)點(diǎn)：容易理解，對初學(xué)者學(xué)起來比較好上手，還有就是事件處理程序是在元素的作用域中運(yùn)行的，程序中的this是引用的當(dāng)前元素。

           缺點(diǎn)：如果這些代碼在頁面中位于span元素的后面，就有可能一段時(shí)間內(nèi)怎么單擊都沒有反應(yīng)，而且也不能夠給給一個(gè)對象添加多個(gè)事件處理程序，因?yàn)楹竺娴臅亚懊娴母采w。

   2)DOM2級事件處理程序

        a) addEventListener() 處理指定事件處理程序的操作;

        用法：elemet.addEventListener(<event-name>, <callback>, <use-capture>)此函數(shù)具有三個(gè)參數(shù)，第一個(gè)參數(shù)是：要處理的事件名，比如click,submit...,第二個(gè)參數(shù)是：事件處理程序的函數(shù)，第三個(gè)參數(shù)是：布爾值（true/false）true，表示在捕獲階段調(diào)用事件處理函數(shù)，false,表示在冒泡階段調(diào)用事件處理程序;比如：以下代碼；

    var spanobj = document.querySelector('span');

    spanobj.addEventListener(“click”,function(){

              alert("span元素被選中");

    },false);

     優(yōu)點(diǎn)：可以同時(shí)給一個(gè)對象添加多個(gè)事件處理程序，并且這些事件處理程序會按照添加的順序觸發(fā)。比如：

       spanobj.addEventListener("click",function(){

              alert("span元素被選中");

        },false);

         spanobj.addEventListener("click",function(){

              alert("span元素被選中1111");

       },false);

會依次彈出“span元素被選中”，"span元素被選中1111"。

        b)removeEventListener(),刪除事件處理程序的操作;

 用法：element.removeEventListener(<event-name>, <callback>, <use-capture>);

專門用來移除addEventListener()添加的事件處理程序，移除時(shí)的參數(shù)與添加時(shí)的參數(shù)相同，那么就需要保留回調(diào)函數(shù)的句柄，因此，也就對于匿名函數(shù)，無法移除，我們不能使用匿名函數(shù)作為回調(diào)函數(shù)。

例如：  添加事件處理程序：

       var spanobj = document.querySelector('span');

         spanobj.addEventListener("click",function(){//這個(gè)回調(diào)函數(shù)是匿名的

              alert("span元素被選中1111");

         },false);

        移除事件處理程序（1）

        spanobj.removeEventListener(“click”,function(){//這種是不起作用的，因?yàn)榛卣{(diào)函數(shù)是匿名的

        alert("span元素被選中1111");

        },false);  

        移除事件處理程序（2）  

                 var spanobj = document.querySelector('span');

                 var  spanhander=function(){ alert("span元素被選中1111"); };//將函數(shù)附值給一個(gè)對象。

                spanobj.addEventListener(“click”,spanhander,false);//這個(gè)函數(shù)的對象作為參數(shù)。

                spanobj.removeEventListener(“click”,spanhander,false);//此時(shí)就可以移除事件處理程序了，

3）Ie事件處理程序 

     a)attachEvent();添加事件處理程序；

      用法:attachEvent(<on+event-name>, <callback>),這個(gè)函數(shù)只有兩個(gè)參數(shù)，第一個(gè)參數(shù)是：要處理的事件名稱以“on”為前綴，第二參數(shù)是：處理程序的函數(shù)。因?yàn)?/span>iE事件模型不支持事件捕獲，所以沒有第三個(gè)布爾值的參數(shù)。

      特點(diǎn)：類似與addEventListener()，同樣允許相同的事件處理程序注冊多次，不過這些事件處理程序不是以添加的順序執(zhí)行，而是以相反的順序被觸發(fā)。而且與DOM0級方法的主要區(qū)別是，事件處理程序的作用域上，在使用DOM0級的情況下，事件處理程序會在其所屬元素的作用域內(nèi)進(jìn)行，而在IE處理程序下，事件處理程序作用域會在全局作用域中進(jìn)行，程序中的this==window。

   b)detachEvent();移除事件處理程序；

     用法：detachEvent(<on+event-name>, <callback>) ,也是使用attachEvent添加的事件必須由detachEvent事件來移除，同樣要必須提供相同的參數(shù)，匿名函數(shù)將不能被移除，例子看上面的removeEventListener()事件。

（3）總結(jié)：一般事件處理程序都會考慮到這三方面，盡可能全寫到如圖（3）添加事件處理程序如下這些會在后期的學(xué)習(xí)中，跨瀏覽器添加事件很有幫助，根據(jù)后期的學(xué)習(xí)，會繼續(xù)完善下面的代碼，使之以后用起來比較方便：

   對應(yīng)上面的添加事件，來進(jìn)行移除事件，這里的移除事件是與添加事件一一對應(yīng)的，            

  最后，修改上面的實(shí)現(xiàn)跨瀏覽器的事件處理程序：

var EventUtil = { 
addHandler: function(element, type, handler){ // 該方法接受3個(gè)參數(shù)：要操作的元素，事件名稱和事件處理程序函數(shù) 
if (element.addEventListener){ //檢查傳入的元素是否存在DOM2級方法 
element.addEventListener(type, handler, false); // 若存在，則使用該方法 
} 
else if (element.addEvent){ // 如果存在的是IE的方法 
element.attachEvent("on" + type, handler); //則使用IE的方法，注意，這里的事件類型必須加上"on"前綴。 
}
 else { // 最后一種可能是使用DOM0級 
element["on" + type] = hander; 
} 
}, 

removeHandler: function(element, type, handler){ // 該方法是刪除之前添加的事件處理程序 
if (element.removeEventListener){ //檢查傳入的元素是否存在DOM2級方法 
element.removeEventListener(type, handler, false); // 若存在，則使用該方法 
} 
else if (element.detachEvent){ // 如果存在的是IE的方法 
element.detachEvent("on" + type, handler); //則使用IE的方法，注意，這里的事件類型必須加上"on"前綴。 
}
 else { // 最后一種可能是使用DOM0及方法(在現(xiàn)代瀏覽器中，應(yīng)該不會執(zhí)行這里的代碼) 
element["on" + type] = null; 
} 
} 
}; 
//可以向下面這樣來使用：
 var btn =document.getElementById("mybtn"); 
var hander= function(){ 
alert("clicked"); 
}; 
//這里省略了部分代碼 
EventUtil.addHandler(btn,"click",hander); 
//這里省略了部分代碼 
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件處理程序