1. 程式人生 > >js事件綁定方法

js事件綁定方法

例子 js事件綁定 是否 nbsp 後來 ie9 捕獲 綁定 type

最近收集了一些關於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事件綁定方法