JQuery中DOM實作事件移除的方法_jquery

本文實例講述了JQuery中DOM實作事件移除的方法。分享給大家供大家參考。具體如下：

可以為同一個元素綁定多個事件，也可以為多個元素綁定同一個事件。假設網頁上有一個元素，使用下列程式碼為該元素綁定多個相同的事件。

$(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>");
  });
})

1．移除按鈕元素上先前註冊的事件

先來看看下面程式碼，點選「刪除所有事件」按鈕，即可刪除上面btn的事件：

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

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>

來看看unbind()方法的語法結構：unbind([type] [, data]);

第1個參數是事件類型，第2個參數是將要移除的函數，具體說明如下：

如果沒有參數，則刪除所有綁定的事件。
如果提供了事件類型作為參數，則只刪除該類型的綁定事件。
如果把在綁定時傳遞的處理函數當作第2個參數，則只有這個特定的事件處理函數會被刪除。

2．移除元素的其中一個事件

首先需要為這些匿名處理函數指定一個變數。

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

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>

另外，對於只需要觸發一次，隨後就要立即解除綁定的情況，JQuery提供了一種簡寫方法－one()方法。 one()方法可以為元素綁定處理函數。當處理函數觸發一次後，立即被刪除。即在每個物件上，事件處理函數只會被執行一次。

one()方法的結構與bind()方法類似，使用方法也與bind()方法相同，其語法結構如下：one (type, [data], fn);

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

<button id="btn">点击我</button>
<div id="test"></div>

使用one()方法為元素綁定點選事件後，只在使用者第1次點選按鈕時，處理函數才執行，之後的點選就不會再起作用。

希望本文所述對大家的jQuery程式設計有所幫助。