JavaScript中事件綁定的方法總結

最近收集了一些關於JavaScript綁定事件的方法，匯總了一下，不全面，但是，希望便於以后自己查看。

JavaScript中綁定事件的方法主要有三種：

1 在DOM元素中直接綁定

2 JavaScript代碼中直接綁定

3 綁定事件監聽函數

一、在DOM元素中直接綁定

也就是直接在html標簽中通過 onXXX=“” 來綁定。舉個例子：

<input type="button" value="點我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="點我呦" onclick="testAlert()">
<script type="text/javascript">
   function testAlert(){
      alert("hello world!");
   }
</script>

二、JavaScript代碼中直接綁定

在JavaScript中通過查找DOM對象，對其綁定，elementObject.onclick=function(){} 的格式，舉例如下：

<input type="button" value="點我呦"  id="demo">
<script type="text/javascript">

   document.getElementById("demo").onclick=function testAlert(){
      alert("hello world!");
   }
</script>

三、綁定事件監聽函數

這里需要了解addEventListener()和attachEvent()的函數語法。

1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流瀏覽器、以及IE9.0及以上）

eventName:要綁定的事件名稱。注意寫法，比如點擊事件，寫成click,而不是onclick.

handle: 處理事件的函數名。但是寫法上沒有小括號。

useCapture:Boolean類型，是否使用捕獲，一般用false，具體涉及到的會在后邊總結。

2 elementObject.attachEvent(eventName,handle);（僅支持IE8及以下）

從網上找到了一個兼容的好辦法，相比較if。。else語句，這個方法用的是try..catch錯誤處理語句，可以避免瀏覽器出現錯誤提示。

function addEvent(obj,type,handle){
   try{
     obj.addEventListener(type,handle,false);
   }catch(e){
     try{
       obj.attachEvent('on'+type,handle);
     }
     catch(e){
       obj['on' + type]=handle;//早期瀏覽器
     }
   }
}

四、說說JQuery中綁定事件的幾種方法。

主要有on()、bind()、live()、delegate()等幾種，相對應的解綁就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind()，其他的都可以給后來追加的元素對象添加綁定事件。

2 這幾種方法中各自有對應支持的JQuery版本。

3 在給動態添加的頁面元素綁定事件時，通常用on()方法。

具體的更多了解，可以點擊這個鏈接 http://www.cnblogs.com/DemoJin/p/4794372.html。