快捷導(dǎo)航

深入理解jQuery之事件移除

更新時(shí)間：2016年06月02日 10:23:58 投稿：jingxian

下面小編就為大家?guī)?lái)一篇深入理解jQuery之事件移除。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

有時(shí)候事件執(zhí)行完了，想取消事件的效果可以通過一定的辦法來(lái)處理。比如bind()方法，可以通過unbind()方法來(lái)移除事件的效果。

比如下面的一個(gè)案例：

<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>");
       });
  })
</script>

html部分：

<body>
<button id="btn">點(diǎn)擊我</button>
<div id="test"></div>
</body>

當(dāng)點(diǎn)擊按鈕btn時(shí)，觸發(fā)了三個(gè)點(diǎn)擊事件，這里的append()方法，向div層中傳遞了三個(gè)段落內(nèi)容。

append() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容。它與html()方法還是不同的，html()方法是改變整個(gè)元素中的內(nèi)容，而不是向元素結(jié)尾插入內(nèi)容。text()方法與html() 方法類似，但區(qū)別在于html()方法中可以寫入html的代碼，而且可以被正確的解析，而text() 只能當(dāng)html代碼為正常的字符串。

這里每次點(diǎn)擊，都會(huì)執(zhí)行一次事件，想div層末尾添加段落。

下面的代碼是取消事件效果的，可以通過刪除事件，使點(diǎn)擊效果失效：

<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>

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

還可以針對(duì)具體的方法，刪除特定的事件。

下面的代碼可以參考：

<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>

unbind()方法的第二個(gè)參數(shù)是事件對(duì)應(yīng)得執(zhí)行函數(shù)的名字，這樣執(zhí)行完后，只有myFun2這個(gè)事件被刪除了，其他兩個(gè)click事件正常執(zhí)行。

還有一種跟bind()方法類似的方法one()，區(qū)別大概就是one()方法只執(zhí)行一次。

為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。

代碼如下：

<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>

點(diǎn)擊后，只執(zhí)行一次。再次點(diǎn)擊不會(huì)觸發(fā)效果。這就是one方法。

以上這篇深入理解jQuery之事件移除就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: