萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JQuery中DOM實現事件移除的方法

JQuery中DOM實現事件移除的方法

 可以為同一個元素綁定多個事件,也可以為多個元素綁定同一個事件。假設網頁上有一個<button>元素,使用以下代碼為該元素綁定多個相同的事件。

1 2 3 4 5 6 7 8 9 $(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的事件:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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> ? 1 2 3 <button id="btn">點擊我</button> <div id="test"></div> <button id="delAll">刪除所有事件</button>

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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>   1 2 3 <button id="btn">點擊我</button> <div id="test"></div> <button id="delTwo">刪除第二個事件</button>

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

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

1 2 3 4 5 6 7 8 9 10 11 <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>   1 2 <button id="btn">點擊我</button> <div id="test"></div>

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

copyright © 萬盛學電腦網 all rights reserved