JQuery入門——移除綁定事件unbind方法概述及應用

更新時間：2013年02月05日 15:49:50 作者：

在DOM對象的實踐操作中,存在用于綁定事件的bind方法,也會有相應的移除綁定事件unbind方法，接下來將介紹unbind方法的使用，感興趣的朋友可以不要錯過了啊，或許本文對你有所幫助

1、在DOM對象的實踐操作中，既然存在用于綁定事件的bind方法，也相應存在用于移出綁定事件的方法，在JQuery中，可以通過unbind方法移除所有綁定的事件或某一個事件。

2、示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>unbind方法移除綁定事件</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
function oClick(){ //自定義事件 
$("#divTip").append("<div>這是按鈕二綁定的事件</div>"); 
}; 
$("input:eq(0)").bind("click",function(){ 
$("#divTip").append("<div>這是按鈕一綁定事件</div>"); 
}); 
$("input:eq(1)").bind("click",oClick); 
$("input:eq(2)").bind("click",function(){ 
$("input").unbind("click",oClick); 
$("#divTip").append("<div>刪除按鈕二事件</div>"); 
}); 
$("input:eq(3)").bind("click",function(){ 
$("input").unbind(); 
$("#divTip").append("<div>移出所有按鈕綁定的事件</div>"); 
}); 
}) 
</script> 
</head> 

<body> 
<div> 
<input id="button1" class="btn" value="按鈕一" type="button"/> 
<input id="button2" type="button" value="按鈕二" class="btn"/> 
<input id="button3" type="button" value="刪除按鈕二事件" class="btn"/> 
<input id="button4" type="button" value="刪除所有事件" class="btn"/> 
</div> 
<div id="divTip"></div> 
</body> 
</html> 

3、效果圖預覽：
點擊按鈕一和按鈕二：

點擊刪除按鈕二事件在點擊按鈕二無反應點擊按鈕一有反應：

點擊刪除所有事件后點擊所有按鈕無反應：

您可能感興趣的文章:

jQuery下通過$.browser來判斷瀏覽器.
用jQuery來判斷瀏覽器的類型,主要是使用$.browser這個工具類
2011-04-04
jquery.uploadifive插件怎么解決上傳限制圖片或文件大小問題
jQuery.uploadifive插件可以很好的解決上傳限制圖片或文件大小問題,具體實例代碼大家參考下本文
2017-05-05
jQuery oLoader實現(xiàn)的加載圖片和頁面效果
我們使用jQuery的ajax在頁面中就像使用iframe一樣加載其他頁面內(nèi)容，今天我給大家分享一個名叫jQuery oLoader的插件，該插件還集成了oPageLoader，可以輕松實現(xiàn)加載圖片和頁面的漂亮效果。
2015-03-03
jQuery樹形下拉菜單特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)幻樹形下拉菜單特效，代碼簡單，非常具有實用價值，需要的朋友可以參考下
2015-08-08
jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法
這篇文章主要介紹了jQuery控制input只能輸入數(shù)字和兩位小數(shù)的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
jQuery實現(xiàn)輸入框下拉列表樹插件特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)輸入框下拉列表樹特效，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery+SpringMVC中的復選框選擇與傳值實例
下面小編就為大家分享一篇jQuery+SpringMVC中的復選框選擇與傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
Jquery中val()表單取值賦值的實例代碼
在jquery中給表單取值或賦值的方法我們只要簡單的$(\'表單ID\').val()即可實現(xiàn)取值了，如果賦值我們可使用$(\'表單ID\').val(\'內(nèi)容\')即可實現(xiàn)了
2013-08-08
jquery 頁眉單行信息滾動顯示實現(xiàn)思路及代碼
將滾動的內(nèi)容查詢出來，放在一個div 或者別的容器里面，具體的實現(xiàn)代碼如下
2014-06-06
jQuery實現(xiàn)類似標簽風格的導航菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)類似標簽風格的導航菜單效果代碼,涉及jquery鼠標事件操作頁面元素的遍歷與樣式動態(tài)修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08