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

以上就是小編為大家帶來的關于JavaScript中事件綁定的方法總結全部內容了，希望大家多多支持武林網~