首頁 > 開發者 > JavaScript

JQuery中綁定事件（bind()）和移除事件（unbind()）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JQuery中綁定事件（bind()）和移除事件（unbind()）

 本文主要向大家詳細介紹了jQuery的綁定事件和移除事件的使用方法和樣本分享，這裡推薦給有需要的小夥伴們參考下。

 

 

有時候事件執行完了，想取消事件的效果可以通過一定的辦法來處理。比如bind()（綁定事件）和unbind()（移除通過bind()方法添加的事件）方法來移除事件的效果。

比如下面的一個案例：

 

代碼如下:


<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>綁定函數1</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數2</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數3</p>");
});
})
</script>

 

html部分：

 

代碼如下:


<body>
<button id="btn">Click Me</button>
<div id="test"></div>
</body>

 

當點擊按鈕btn時，觸發了三個點擊事件，這裡的append()方法，向div層中傳遞了三個段落內容。

append() 方法在被選元素的結尾（仍然在內部）追加指定內容。它與html()方法還是不同的，html()方法是改變整個元素中的內容，而不是向元素結尾追加內容。text()方法與html()方法類似，但區別在於html()方法中可以寫入html的代碼，而且可以被正確的解析，而text()只能當html代碼為正常的字串。

這裡每次點擊，都會執行一次事件，想div層末尾添加段落。下面的代碼是取消事件效果的，可以通過刪除事件，使點擊效果失效：

 

代碼如下:


<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>綁定函數1</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數2</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數3</p>");
});
$('#delAll').click(function(){
$('#btn').unbind("click");
});
})
</script>

 

$('#btn').unbind("click");這句代碼的作用就是取消元素btn下的click事件。它不僅僅對於bind()方法有效，它對於click()方法同樣有效。從某種角度上講，bind("click",function(){})與click(function(){})是等價的。

還可以針對具體的方法，刪除特定的事件。下面的代碼可以參考：

 

代碼如下:


<script type="text/javascript">
$(function(){
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>綁定函數1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>綁定函數2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>綁定函數3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
})
</script>

 

unbind()方法的第二個參數是事件對應得執行函數的名字，這樣執行完後，只有myFun2這個事件被刪除了，其他兩個click事件正常執行。

還有一種跟bind()方法類似的方法one()，區別大概就是one()方法只執行一次。為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。代碼如下：

 

代碼如下:


<script type="text/javascript">
$(function(){
$('#btn').one("click", function(){
$('#test').append("<p>綁定函數1</p>");
}).one("click", function(){
$('#test').append("<p>綁定函數2</p>");
}).one("click", function(){
$('#test').append("<p>綁定函數3</p>");
});
})
</script>

 

點擊後，只執行一次。再次點擊不會觸發效果。這就是one方法。

以上所述就是本文的全部內容了，希望本文能夠使大家更好的理解jQuery的綁定事件和移除事件

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
bind bound bind dn bind documentation bind example bind manual bind null bind timeout
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More