欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery中DOM實(shí)現(xiàn)事件移除的方法

 更新時(shí)間：2015年06月13日 11:30:55   作者：簡(jiǎn)明現(xiàn)代魔法  
這篇文章主要介紹了JQuery中DOM實(shí)現(xiàn)事件移除的方法,涉及jQuery中unbind方法移除事件綁定的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery中DOM實(shí)現(xiàn)事件移除的方法。分享給大家供大家參考。具體如下：

可以為同一個(gè)元素綁定多個(gè)事件，也可以為多個(gè)元素綁定同一個(gè)事件。假設(shè)網(wǎng)頁(yè)上有一個(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．移除按鈕元素上以前注冊(cè)的事件

先來(lái)看看下面代碼，點(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>

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

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

如果沒(méi)有參數(shù)，則刪除所有綁定的事件。
如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。
如果把在綁定時(shí)傳遞的處理函數(shù)作為第2個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。

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>

另外，對(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>


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

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

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論