Detaillierte Erläuterung der Verwendung der DOM-Ereignisbindung in JQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung der DOM-Ereignisbindung in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wenn Sie nach dem Laden des Dokuments Ereignisse an Elemente binden möchten, um bestimmte Vorgänge abzuschließen, können Sie die Methode bind() verwenden, um bestimmte Ereignisse an übereinstimmende Elemente zu binden. Das Aufrufformat der Methode bind() ist:

bind( type [, data] , fn);

Die bind()-Methode verfügt über drei Parameter, die im Folgenden beschrieben werden.

Der erste Parameter ist der Ereignistyp, einschließlich: Unschärfe, Fokus, Laden, Größe ändern, Scrollen, Entladen, Klicken, Doppelklick, Mousedown, Mouseup, Mousemove, Mouseover, Mouseout, Mouseenter, Mouseleave, Ändern, Auswählen, Senden, Keydown , Tastendruck, Tastendruck, Fehler usw. können natürlich auch benutzerdefinierte Namen sein.
Der zweite Parameter ist ein optionaler Parameter und ein zusätzliches Datenobjekt, das als Eigenschaftswert „event.data“ an das Ereignisobjekt übergeben wird.
Der dritte Parameter ist die an Meter gebundene Verarbeitungsfunktion.

Sie können feststellen, dass der Ereignisbindungstyp in jQuery weniger „Ein“ hat als der normale JavaScript-Ereignisbindungstyp. Beispielsweise entspricht das Mausklickereignis dem Klickereignis in jQuer und der Funktion onclick() in JavaScript.

Je nach Anforderungen müssen Sie die folgenden Schritte ausführen.

1. Warten Sie, bis das DOM geladen ist.
2. Suchen Sie das Element, in dem sich der „Titel“ befindet, und binden Sie das Klickereignis.
3. Suchen Sie das Element „content“ und zeigen Sie das Element „content“ an.

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

Wie die Methode ready() kann auch die Methode bind() mehrfach aufgerufen werden.

Im obigen jQuery-Code gibt es ein Schlüsselwort this, das die gleiche Funktion wie in JavaScript hat. Dies bezieht sich auf das DOM-Element, das das entsprechende Verhalten trägt. Um diesem DOM-Element die Verwendung von Methoden in jQuery zu ermöglichen, können Sie es mit $(this) in ein jQuery-Objekt konvertieren.

Um festzustellen, ob ein Element angezeigt wird, können Sie die Methode is() in jQuery verwenden. Im Code wird festgestellt, dass $(this).next("div.content") mehrfach verwendet wird, sodass eine lokale Variable dafür definiert werden kann: $content.

Im obigen Beispiel ist der an das Element gebundene Ereignistyp „Klick“. Wenn der Benutzer klickt, wird das gebundene Ereignis ausgelöst und dann wird der Funktionscode des Ereignisses ausgeführt. Ändern Sie nun den Ereignistyp in Mouseover und Mouseout, d. h. wenn der Cursor darüber gleitet, wird das Ereignis ausgelöst. Die folgenden Schritte sind erforderlich.

1. Warten Sie, bis das DOM geladen ist.
2. Suchen Sie das Element, in dem sich der „Titel“ befindet, und binden Sie das Mouseover-Ereignis.
3. Suchen Sie das Element „Inhalt“ und zeigen Sie „Inhalt“ an.
4. Suchen Sie das Element, in dem sich der „Titel“ befindet, und binden Sie das Mouseout-Ereignis.
5. Suchen Sie das Element „Inhalt“ und blenden Sie „Inhalt“ aus.

Nachdem der Code ausgeführt wurde und der Cursor über den Link „Titel“ gleitet, wird der entsprechende „Inhalt“ angezeigt. Wenn der Cursor aus dem Link „Titel“ herausgleitet, wird der entsprechende „Inhalt“ ausgeblendet.

Der Code lautet wie folgt:

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

In den obigen Beispielen wird die Methode bind() verwendet, um das Click-Ereignis, das Mouseover-Ereignis und das Mouseout-Ereignis an den „Titel“ zu binden. Die Bindungsmethoden sind dieselben. Darüber hinaus kann die Methode bind0 auch alle anderen JavaScript-Ereignisse binden.

Ereignisse wie Click, Mouseover und Mouseout werden in Programmen häufig verwendet. jQuery bietet hierfür auch eine Reihe abgekürzter Methoden an. Die Abkürzungsmethode ähnelt der bind()-Methode und erzielt den gleichen Effekt. Der einzige Unterschied besteht darin, dass sie die Codemenge reduzieren kann.

Wenn Sie beispielsweise das obige Beispiel umschreiben, um Abkürzungen zum Binden von Ereignissen zu verwenden, lautet der Code wie folgt:

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

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