jQuery-使用bind()綁定事件

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

我們可以綁定事件兩次完成。

view plaincopy to clipboardprint?

1. $("div").click(function(e){      
2.     alert("event");      
3. }).keydown(function(e){      
4.     alert("event");      
5. });   

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

view plaincopy to clipboardprint?

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

這樣看起來就漂亮多了。

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

view plaincopy to clipboardprint?

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更精簡了。

反應：