一.事件綁定#

要想讓JavaScript 對(duì)用戶的操作作出響應(yīng)，首先要對(duì) DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對(duì)應(yīng)不同的名稱。
在JavaScript中，有三種常用的綁定事件的方法：
· 在DOM元素中直接綁定；
· 在JavaScript代碼中綁定；
· 綁定事件監(jiān)聽函數(shù)。

1.在DOM中直接綁定事件
我們可以在
DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件類型請(qǐng)查看， DOM事件 。

<input type="button" value="click me" onclick="hello()"> 
<script> 
        function hello(){ alert("hello world!"); }
 </script> 

2.在JavaScript代碼中綁定事件
在JavaScript代碼中（即 script 標(biāo)簽內(nèi)）綁定事件可以使JavaScript代碼與HTML標(biāo)簽分離，文檔結(jié)構(gòu)清晰，便于管理和開發(fā)。

<input type="button" value="click me" id="btn"> 
<script>
       document.getElementById(**"btn"**).onclick = function(){
           alert("hello world!"); }
       </scrip*> 

3.使用事件監(jiān)聽綁定事件
綁定事件的另一種方法是用
addEventListener() 或 attachEvent() 來綁定事件監(jiān)聽函數(shù)。下面詳細(xì)介紹，事件監(jiān)聽。

二.事件監(jiān)聽#

關(guān)于事件監(jiān)聽，
W3C規(guī)范中定義了3個(gè)事件階段，依次是捕獲階段、目標(biāo)階段、冒泡階段。
起初Netscape制定了JavaScript的一套事件驅(qū)動(dòng)機(jī)制（即事件捕獲）。隨即IE也推出了自己的一套事件驅(qū)動(dòng)機(jī)制（即事件冒泡）。最后W3C規(guī)范了兩種事件機(jī)制，分為捕獲階段、目標(biāo)階段、冒泡階段。IE8以前IE一直堅(jiān)持自己的事件機(jī)制（前端人員一直頭痛的兼容性問題），IE9以后IE也支持了W3C規(guī)范。
W3C規(guī)范
語法：
element.addEventListener(event, function, useCapture)
event : （必需）事件名，支持所有 [DOM事件]
function：（必需）指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。
useCapture：（可選）指定事件是否在捕獲或冒泡階段執(zhí)行。true，捕獲。false，冒泡。默認(rèn)false。
注：IE8以下不支持。

<input type="button" value="click me" id="btn1">
 <script>
       document.getElementById("btn1").addEventListener("click",hello);   
        function hello(){ alert("hello world!"); } 
</script> 

IE標(biāo)準(zhǔn)
語法：
element.attachEvent(event, function)
event：（必需）事件類型。需加“on“，例如：onclick。
function：（必需）指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。

<input type="button" value="click me" id="btn2"> 
<script> 
        document.getElementById("btn2").attachEvent("onclick",hello);     
        function hello(){ alert("hello world!"); } 
</script> 

事件監(jiān)聽的優(yōu)點(diǎn)

1、可以綁定多個(gè)事件。

<input type="button" value="click me" id="btn3"> 
<script> 
      var btn3 = document.getElementById("btn3"); 
      btn3.onclick =  function(){ alert("hello 1"); //不執(zhí)行}
      btn3.onclick = function(){ alert("hello 2"); *//執(zhí)行} 
</script> 

常規(guī)的事件綁定只執(zhí)行最后綁定的事件。
2、可以解除相應(yīng)的綁定

<input type="button" value="click me" id="btn5">
 <script>
      var btn5 = document.getElementById("btn5");     
      btn5.addEventListener("click",hello1);//執(zhí)行了
      btn5.addEventListener("click",hello2);//不執(zhí)行
      btn5.removeEventListener("click",hello2); function hello1(){      
      alert("hello 1"); } function hello2(){ alert("hello 2"); }
 </script> 

封裝事件監(jiān)聽

    <input type="button" value="click me" id="btn5*> //綁定監(jiān)聽事件
    function addEventHandler(target,type,fn){
         if(target.addEventListener){ 
                target.addEventListener(type,fn); 
         }else{
                target.attachEvent("on"+type,fn);
         } 
     } //移除監(jiān)聽事件
     function removeEventHandler(target,type,fn){       
           if(target.removeEventListener){       
                 target.removeEventListener(type,fn); 
           }else{
                 target.detachEvent("on"+type,fn);
           } 
      } //測(cè)試
       var btn5 = document.getElementById("btn5");     
       addEventHandler(btn5,"click",hello1);//添加事件
       hello1
       addEventHandler(btn5,"click",hello2);//添加事件
       hello2
       removeEventHandler(btn5,"click",hello1);//移除事件
       hello1