JQuery_jqueryでDOMのイベント削除を実装する方法

この記事の例では、JQuery で DOM 内のイベントを削除する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

複数のイベントを同じ要素にバインドしたり、同じイベントを複数の要素にバインドしたりできます。 Web ページに bb9345e55eb71822850ff156dfde57c8 要素があると仮定します。次のコードを使用して、複数の同一のイベントを要素にバインドします。

$(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．ボタン要素

で以前に登録されたイベントを削除します

まず、以下のコードを見てください。[すべてのイベントを削除] ボタンをクリックして、上のボタン イベントを削除します。

<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]);

最初のパラメータはイベントの種類、2 番目のパラメータは削除する関数です。詳細は次のとおりです。

パラメータがない場合は、バインドされたイベントをすべて削除します。
イベント タイプがパラメータとして指定された場合、そのタイプのバインドされたイベントのみが削除されます。
バインディング時に渡されたハンドラー関数が 2 番目のパラメーターとして渡された場合、この特定のイベント ハンドラーのみが削除されます。

2．

要素のイベントの 1 つを削除します。

まず、これらの匿名処理関数の変数を指定する必要があります。

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

さらに、バインディングを 1 回トリガーするだけですぐにバインドを解除する必要がある状況のために、JQuery は短縮メソッドである one() メソッドを提供します。 one() メソッドは、ハンドラー関数を要素にバインドできます。処理関数は一度トリガーされるとすぐに削除されます。つまり、各オブジェクトで、イベント ハンドラー関数は 1 回だけ実行されます。

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() メソッドを使用してクリック イベントを bb9345e55eb71822850ff156dfde57c8 要素にバインドすると、ユーザーが初めてボタンをクリックしたときにのみ処理関数が実行され、それ以降のクリックは機能しなくなります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。