快捷導(dǎo)航

多種jQuery綁定事件的實現(xiàn)方式

更新時間：2016年06月13日 10:07:50 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了多種jQuery綁定事件的實現(xiàn)方式，分享了jQuery防止重復(fù)綁定事件的解決方法，感興趣的小伙伴們可以參考一下

最近發(fā)現(xiàn)jQuery一個對象的事件可以重復(fù)綁定多次，當(dāng)事件觸發(fā)的時候會引起代碼多遍執(zhí)行。

下面是一個click事件被重復(fù)綁定的示例:

function reg_button_click(){
 $("#button).click(function(){
 alert("button click");
 });
}
$(document).ready(function(){
 #重復(fù)注冊3次
 reg_button_click();
 reg_button_click();
 reg_button_click();
 #觸發(fā)的時候 出現(xiàn)3個alert
 $('#button').click();
});

下面給出解決方法：

對于需要重復(fù)綁定的場景，再事件注冊時候考慮用先unbind 再bind的方法；或者先off 再on

function reg_button_click(){
 $("#button).unbind('click').bind('click',(function(){
 alert("button click");
 });
}
$(document).ready(function(){
 #重復(fù)注冊3次
 reg_button_click();
 reg_button_click();
 reg_button_click();
 #觸發(fā)的時候 出現(xiàn)3個alert
 $('#button').click();
});

那jQuery綁定事件的實現(xiàn)方式有哪些，下面就為大家分享jQuery綁定事件的方法，供大家參考，具體內(nèi)容如下

<html>

<head>

<meta charset="utf-8" />

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--百度CDN-->

</head>

 

<body>

<input type="text"/>

<input type="button" value="button1"/>

<script>

$(function(){

 var text = $(":text");

 var button = $(":button");

 //調(diào)試器記錄日志 console.log("message"); 如：火狐瀏覽器，打開FireBug(按F12)

 

 //觸發(fā)單個事件：兩種方式

 button.bind("mouseover",function(){

 console.log("移入");

 });

 button.bind({

 "mouseout": function(){

  console.log("移出");

 }

 });

 //多個事件：三個方式

 text.bind("dblclick blur",function(){

 console.log("雙擊或者失去焦點");

 });

 

 text.bind({

 "dblclick blur":function(){

  console.log("雙擊或者失去焦點");

 }

 });

 text.bind({

 "dblclick":function(){

  console.log("雙擊");

 },

 blur:function(){

  console.log("失去焦點");

 }

 });

 

 //取消事件

 text.unbind("dblclick"); //取消單個事件

 //text.unbind("dblclick blur"); //取消多個事件

 //text.unbind(); //取消全部事件

});

 

</script>

</body>

</html>

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: