jQuery 移除事件的方法

更新時(shí)間：2020年06月20日 14:26:05 作者：認(rèn)真對(duì)待世界的小白

這篇文章主要介紹了jQuery 移除事件的方法，文中講解非常詳細(xì)，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

在綁定事件的過(guò)程中，不僅可以為同一個(gè)元素綁定多個(gè)事件，也可以為多個(gè)元素綁定同一個(gè)事件。假設(shè)網(wǎng)頁(yè)上有一個(gè)<button>元素，使用以下代碼為該元素綁定多個(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>

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

當(dāng)單擊按鈕后，會(huì)出現(xiàn)如上圖所示的效果。

1. 移除按鈕元素上所有注冊(cè)的事件

添加一個(gè)移除事件的按鈕。然后為按鈕綁定一個(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>");
       });
    $('#delAll').click(function(){
       $('#btn').unbind("click");
    });
  })
</script>

<body>
<button id="btn">點(diǎn)擊我</button>
<div id="test"></div>
<button id="delAll">刪除所有事件</button>
</body>

因?yàn)樵亟壎ǖ亩际?click 事件，所以不寫參數(shù)也可以達(dá)到同樣的目的。

$('#delAll').click(function(){
　　$('#btn').unbind();
});

下面來(lái)看看 unbind() 方法的語(yǔ)法結(jié)構(gòu)：unbind([type] , [data]);

第1個(gè)參數(shù)是事件類型，第2個(gè)參數(shù)是將要移除的函數(shù)，具體說(shuō)明如下。

(1) 如果沒(méi)有參數(shù)，則刪除所有綁定的事件。

(2) 如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。

(3) 如果把在綁定時(shí)傳遞的處理函數(shù)作為第2個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。

2. 移除<button>元素的其中一個(gè)事件

首先需要為這些匿名處理函數(shù)指定一個(gè)變量。然后就可以單獨(dú)刪除某一個(gè)事件了， jQuery 代碼如下：

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

<body>
<button id="btn">點(diǎn)擊我</button>
<div id="test"></div>
<button id="delTwo">刪除第二個(gè)事件</button>
</body>

當(dāng)單擊“刪除第二個(gè)事件”按鈕后，再次單擊“點(diǎn)擊我”按鈕，顯示下圖所示的效果。

另外，對(duì)于只需要觸發(fā)一次，隨后就要立即解除綁定的情況，jQuery 提供了一種簡(jiǎn)寫方法——one() 方法。 one() 方法可以為元素綁定處理函數(shù)。當(dāng)處理函數(shù)觸發(fā)一次后，立即被刪除。即在每個(gè)對(duì)象上，事件處理函數(shù)只會(huì)被執(zhí)行一次。

one() 方法的結(jié)構(gòu)與 bind() 方法類似，使用方法也與 bind() 方法相同，其語(yǔ)法結(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>

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

使用one() 方法為<button>元素綁定單擊事件后，只在用戶第1次單擊按鈕時(shí)，處理函數(shù)才執(zhí)行，之后的單擊毫無(wú)作用。

以上就是jQuery 移除事件的方法的詳細(xì)內(nèi)容，更多關(guān)于jQuery 移除事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: