JQuery中DOM實(shí)現(xiàn)事件移除的方法
本文實(shí)例講述了JQuery中DOM實(shí)現(xiàn)事件移除的方法。分享給大家供大家參考。具體如下：
可以為同一個(gè)元素綁定多個(gè)事件，也可以為多個(gè)元素綁定同一個(gè)事件。假設(shè)網(wǎng)頁上有一個(gè)<button>元素，使用以下代碼為該元素綁定多個(gè)相同的事件。
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>我的綁定函數(shù)1</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數(shù)2</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數(shù)3</p>");
});
})
1．移除按鈕元素上以前注冊的事件
先來看看下面代碼，點(diǎn)擊“刪除所有事件”按鈕，即可刪除上面btn的事件：
<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>我的綁定函數(shù)1</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數(shù)2</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數(shù)3</p>");
});
$('#delAll').click(function(){
$('#btn').unbind("click");
});
})
</script>
<button id="btn">點(diǎn)擊我</button> <div id="test"></div> <button id="delAll">刪除所有事件</button>
來看看unbind()方法的語法結(jié)構(gòu)：unbind([type] [, data]);
第1個(gè)參數(shù)是事件類型，第2個(gè)參數(shù)是將要移除的函數(shù)，具體說明如下：
如果沒有參數(shù)，則刪除所有綁定的事件。
如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。
如果把在綁定時(shí)傳遞的處理函數(shù)作為第2個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會被刪除。
2．移除<button>元素的其中一個(gè)事件
首先需要為這些匿名處理函數(shù)指定一個(gè)變量。
<script type="text/javascript">
$(function(){
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的綁定函數(shù)1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的綁定函數(shù)2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>我的綁定函數(shù)3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
})
</script>
<button id="btn">點(diǎn)擊我</button> <div id="test"></div> <button id="delTwo">刪除第二個(gè)事件</button>
另外，對于只需要觸發(fā)一次，隨后就要立即解除綁定的情況，JQuery提供了一種簡寫方法——one()方法。one()方法可以為元素綁定處理函數(shù)。當(dāng)處理函數(shù)觸發(fā)一次后，立即被刪除。即在每個(gè)對象上，事件處理函數(shù)只會被執(zhí)行一次。
one()方法的結(jié)構(gòu)與bind()方法類似，使用方法也與bind()方法相同，其語法結(jié)構(gòu)如下：one (type, [data], fn);
<script type="text/javascript">
$(function(){
$('#btn').one("click", function(){
$('#test').append("<p>我的綁定函數(shù)1</p>");
}).one("click", function(){
$('#test').append("<p>我的綁定函數(shù)2</p>");
}).one("click", function(){
$('#test').append("<p>我的綁定函數(shù)3</p>");
});
})
</script>
<button id="btn">點(diǎn)擊我</button> <div id="test"></div>
使用one()方法為<button>元素綁定單擊事件后，只在用戶第1次單擊按鈕時(shí)，處理函數(shù)才執(zhí)行，之后的單擊就不會再起作用。
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery如何退出each循環(huán)的? 在回調(diào)函數(shù)里return false即可，大多數(shù)jq的方法都是如此的2014-02-02
本文主要介紹了jQuery實(shí)現(xiàn)驗(yàn)證碼功能的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
添加節(jié)點(diǎn)的方法有很多，在本文將為大家介紹下jquery中添加節(jié)點(diǎn)幾種方法，感興趣的朋友可以參考下2013-09-09
jquery實(shí)現(xiàn)自定義圖片裁剪功能【推薦】
本文主要介紹了jquery實(shí)現(xiàn)自定義圖片裁剪功能，代碼超級簡單，易修改。下面跟著小編一起來看下吧2017-03-03
jQuery Validate插件ajax方式驗(yàn)證輸入值的實(shí)例
下面小編就為大家分享一篇jQuery Validate插件ajax方式驗(yàn)證輸入值的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
右下角彈出提示框想必大家都有見到過吧，其實(shí)有實(shí)現(xiàn)方法有很多，在本文為大家詳細(xì)介紹在jquery中具體的實(shí)現(xiàn)，感興趣的朋友可以了解下2013-10-10
在本文將為大家介紹喜下如何使用jquery 清空file域并做到兼容個(gè)瀏覽器，感興趣的朋友可以參考下2013-10-10
jQuery實(shí)現(xiàn)簡單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
自寫寫的一個(gè)jQuery插件，可以實(shí)現(xiàn)簡單網(wǎng)頁遮罩層/彈出層功能，并且兼容IE6、IE7，需要的朋友可以參考下2014-06-06
jquery中的each()非常好用，用起來非常的爽，下面小編給大家介紹jquery中each()的用法詳細(xì)介紹，感興趣的朋友一起看看吧2016-05-05