So implementieren Sie die Ereignisentfernung im DOM in JQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Methode zum Entfernen von Ereignissen im DOM in JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Sie können mehrere Ereignisse an dasselbe Element binden, oder Sie können dasselbe Ereignis an mehrere Elemente binden. Angenommen, es gibt ein bb9345e55eb71822850ff156dfde57c8-Element auf der Webseite. Verwenden Sie den folgenden Code, um mehrere identische Ereignisse an das Element zu binden.

$(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． Entfernen Sie zuvor registrierte Ereignisse auf Schaltflächenelementen

Sehen Sie sich zunächst den Code unten an. Klicken Sie auf die Schaltfläche „Alle Ereignisse löschen“, um die BTN-Ereignisse oben zu löschen:

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

Werfen wir einen Blick auf die Syntaxstruktur der unbind()-Methode: unbind([type] [, data]);

Der erste Parameter ist der Ereignistyp und der zweite Parameter ist die zu entfernende Funktion. Die Details lauten wie folgt:

Wenn keine Parameter vorhanden sind, löschen Sie alle gebundenen Ereignisse.
Wenn ein Ereignistyp als Parameter angegeben wird, werden nur gebundene Ereignisse dieses Typs entfernt.
Wenn die beim Binden übergebene Handler-Funktion als zweiter Parameter übergeben wird, wird nur dieser spezifische Event-Handler gelöscht.

2． Entfernen Sie eines der Ereignisse des bb9345e55eb71822850ff156dfde57c8-Elements

Zuerst müssen Sie eine Variable für diese anonymen Verarbeitungsfunktionen angeben.

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

Darüber hinaus stellt JQuery für Situationen, in denen die Bindung nur einmal ausgelöst und dann sofort aufgehoben werden muss, eine Abkürzungsmethode bereit – die one()-Methode. Die Methode one() kann eine Handlerfunktion an ein Element binden. Bei einmaligem Auslösen der Verarbeitungsfunktion wird diese sofort gelöscht. Das heißt, für jedes Objekt wird die Event-Handler-Funktion nur einmal ausgeführt.

Die Struktur der one()-Methode ähnelt der bind()-Methode und ihre Verwendung ist dieselbe wie die der bind()-Methode. Ihre Syntaxstruktur ist wie folgt: 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>

Nachdem die one()-Methode zum Binden eines Klickereignisses an das bb9345e55eb71822850ff156dfde57c8-Element verwendet wurde, wird die Verarbeitungsfunktion nur ausgeführt, wenn der Benutzer zum ersten Mal auf die Schaltfläche klickt, und nachfolgende Klicks funktionieren nicht mehr.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.