jQuery-使用bind()綁定事件

很多時候我們可能會想讓使用者在做兩樣動作,都可以觸發同樣的事件,比方說在網頁上使用mouse event,可是在平板電腦或智慧型手機卻沒有mouse event,這時候我們可能會需要使用touch event,這裡就會用到。

我們可以綁定事件兩次完成。
  1. $("div").click(function(e){      
  2.     alert("event");      
  3. }).keydown(function(e){      
  4.     alert("event");      
  5. });   

這樣看起來還好,可是同樣的行為卻需要重新貼上兩次,如果function裡面的東西比較多,看起來就真的很醜了,這時候我們就可以使用bind來解決這個問題。

  1. function handler(e){   
  2.     alert("event");   
  3. }   
  4.   
  5. $("div").bind("click keydown", handler);   
  6. //取消   
  7. $("div").unbind("click keydown", handler);  

這樣看起來就漂亮多了。

而使用bind還可以帶值進去,這樣就可以做很多看起來很像,卻不完全重覆的事件。

  1. function handler(e){   
  2.     alert("the color is: "+e.data.color);   
  3. }   
  4.   
  5. $("#btn1").bind("click", {color:"red"}, handler);   
  6. $("#btn2").bind("click", {color:"yellow"}, handler);   
  7. $("#btn3").bind("click", {color:"blue"}, handler);  

這樣點三個按鈕就會各自帶不一樣的值了,學會這個就可以讓你的code更精簡了。

留言

熱門文章