最近收集了一些關於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()方法。

js事件綁定方法