jQuery => Veranstaltungen

Bemerkungen

jQuery behandelt Ereignisse intern über die Funktion addEventListener . Das bedeutet, dass es völlig legal ist, mehrere Funktionen für dasselbe DOM-Element an dasselbe Ereignis gebunden zu haben.

Event-Handler anhängen und trennen

Hängen Sie einen Ereignishandler an

Seit Version 1.7 hat jQuery die Ereignis-API .on() . Auf diese Weise können alle Standardereignisse für Javascript oder benutzerdefinierte Ereignisse an das aktuell ausgewählte jQuery-Element gebunden werden. Es gibt Verknüpfungen wie .click() , aber .on() bietet Ihnen mehr Optionen.

HTML

<button id="foo">bar</button>

jQuery

$( "#foo" ).on( "click", function() {
  console.log( $( this ).text() ); //bar
});

Trennen Sie einen Ereignishandler

Natürlich haben Sie auch die Möglichkeit, Ereignisse von Ihren jQuery-Objekten zu trennen. Verwenden Sie dazu .off( events [, selector ] [, handler ] ) .

HTML

<button id="hello">hello</button>

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off();
});

Wenn Sie auf die Schaltfläche klicken, verweist $(this) auf das aktuelle jQuery-Objekt und entfernt alle angefügten Ereignishandler daraus. Sie können auch angeben, welcher Ereignishandler entfernt werden soll.

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off('click');
});

$('#hello').on('mouseenter', function(){
    console.log('you are about to click');
});

In diesem Fall funktioniert das mouseenter Ereignis nach dem Klicken weiterhin.

Delegierte Ereignisse

Beginnen wir mit dem Beispiel. Hier ist ein sehr einfaches Beispiel-HTML.

Beispiel HTML

<html>
    <head>
    </head>
    <body>
        <ul>
            <li>
                <a href="some_url/">Link 1</a>
            </li>
            <li>
                <a href="some_url/">Link 2</a>
            </li>
            <li>
                <a href="some_url/">Link 3</a>
            </li>
        </ul>
    </body>
</html>

Das Problem

In diesem Beispiel möchten wir nun allen <a> Elementen einen Ereignis-Listener hinzufügen. Das Problem ist, dass die Liste in diesem Beispiel dynamisch ist. <li> -Elemente werden im Laufe der Zeit hinzugefügt und entfernt. Die Seite wird jedoch zwischen den Änderungen nicht aktualisiert. Dies würde uns ermöglichen, einfache Klickereignis-Listener für die Verknüpfungsobjekte zu verwenden (dh $('a').click() ).

Das Problem, das wir haben, ist das Hinzufügen von Ereignissen zu den <a> Elementen, die kommen und gehen.

Hintergrundinformationen - Weitergabe von Ereignissen

Delegierte Ereignisse sind nur aufgrund der Weitergabe von Ereignissen möglich (häufig als Ereignisblubbern bezeichnet). Jedes Mal, wenn ein Ereignis ausgelöst wird, sprudelt es bis zum Dokumentstamm nach oben. Sie delegieren die Behandlung eines Ereignisses an ein sich nicht änderndes Vorfahrenelement, daher der Name "delegierte" Ereignisse.

Wenn Sie im obigen Beispiel auf <a> Element-Link klicken, wird in diesen Elementen in dieser Reihenfolge ein Klick-Ereignis ausgelöst:

ein
li
ul
Karosserie
html
Dokument Root

Lösung

Da wir wissen, was das Aufblühen von Ereignissen bewirkt, können wir eines der gesuchten Ereignisse abfangen, die sich durch unseren HTML-Code ausbreiten.

In diesem Beispiel ist das Element <ul> ein guter Ort, um es zu erfassen, da dieses Element nicht dynamisch ist:

$('ul').on('click', 'a', function () {
  console.log(this.href); // jQuery binds the event function to the targeted DOM element
                          // this way `this` refers to the anchor and not to the list
  // Whatever you want to do when link is clicked
});

In oben:

Wir haben 'ul', der Empfänger dieses Ereignis-Listeners
Der erste Parameter ("Klick") definiert, welche Ereignisse wir zu erkennen versuchen.
Der zweite Parameter ('a') wird verwendet, um anzugeben, woher das Ereignis stammen muss (von allen untergeordneten Elementen unter dem Empfänger dieses Ereignis-Listeners, ul).
Der dritte Parameter ist der Code, der ausgeführt wird, wenn die Anforderungen des ersten und des zweiten Parameters erfüllt sind.

Im Detail, wie die Lösung funktioniert

Der Benutzer klickt auf das <a> -Element
Dadurch wird das Klickereignis für das <a> -Element <a> .
Das Ereignis sprudelt zum Dokumentstamm.
Das Ereignis sprudelt zuerst zum Element <li> und dann zum Element <ul> .
Der Ereignis-Listener wird ausgeführt, wenn das <ul> -Element mit dem Ereignis-Listener verbunden ist.
Der Ereignis-Listener erkennt zuerst das auslösende Ereignis. Das sprudelnde Ereignis ist "Klick" und der Listener hat "Klick", es ist ein Pass.
Die Listener-Checks versuchen, den zweiten Parameter ('a') mit jedem Element in der Blasenkette abzugleichen. Da das letzte Element in der Kette ein 'a' ist, stimmt dies mit dem Filter überein und dies ist auch ein Durchlauf.
Der Code im dritten Parameter betrieben , um die angepassten Element mit , wie es this . Wenn die Funktion keinen Aufruf von stopPropagation() , wird das Ereignis weiter nach oben in Richtung Stamm ( document ) propagiert.

Hinweis: Wenn ein passender, nicht wechselnder Vorgänger nicht verfügbar / zweckmäßig ist, sollten Sie ein document . Als Gewohnheit verwenden Sie 'body' aus folgenden Gründen nicht:

body hat einen Fehler, der mit dem Styling zu tun hat, was dazu führen kann, dass Mausereignisse nicht dazu kommen. Dies ist vom Browser abhängig und kann auftreten, wenn die berechnete Körpergröße 0 ist (z. B. wenn alle untergeordneten Elemente absolute Positionen haben). Mausereignisse blasen immer zum document .
document immer in Ihrem Skript vorhanden, sodass Sie delegierte Handler an ein document außerhalb eines DOM-ready-Handlers anschließen können, um sicherzustellen, dass sie weiterhin funktionieren.

Ereignis zum Laden von Dokumenten .load ()

Wenn Sie möchten, dass Ihr Skript wartet, bis eine bestimmte Ressource geladen wurde, z. B. ein Bild oder eine PDF, können Sie .load() verwenden. .load() ist eine Abkürzung für die Verknüpfung .on( "load", handler) .

HTML

<img src="image.jpeg" alt="image" id="image">

jQuery

$( "#image" ).load(function() {
  // run script
});

Ereignisse zum Wiederholen von Elementen ohne Verwendung von IDs

Problem

Es gibt eine Reihe sich wiederholender Elemente auf der Seite, die Sie wissen müssen, bei welchem Ereignis ein Ereignis aufgetreten ist, um etwas mit dieser bestimmten Instanz zu tun.

Lösung

Geben Sie allen gemeinsamen Elementen eine gemeinsame Klasse
Wenden Sie den Ereignislistener auf eine Klasse an. this interne Ereignishandler ist das passende Auswahlelement, auf dem das Ereignis aufgetreten ist
Traverse zum äußersten wiederholenden Behälter für die Instanz durch beginnend bei this
Verwenden Sie find() in diesem Container, um andere für diese Instanz spezifische Elemente zu isolieren

HTML

<div class="item-wrapper" data-item_id="346">
   <div class="item"><span class="person">Fred</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>
<div class="item-wrapper" data-item_id="393">
   <div clss="item"><span class="person">Wilma</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>

jQuery

$(function() {
  $('.delete').on('click', function() {
    // "this" is element event occured on
    var $btn = $(this);
    // traverse to wrapper container
    var $itemWrap = $btn.closest('.item-wrapper');
    // look within wrapper to get person for this button instance
    var person = $itemWrap.find('.person').text();
    // send delete to server and remove from page on success of ajax
    $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
      $itemWrap.remove()
    }).fail(function() {
      alert('Ooops, not deleted at server');
    });
  });
});

originalEvent

Manchmal gibt es Eigenschaften, die im jQuery-Ereignis nicht verfügbar sind. Um auf die zugrunde liegenden Eigenschaften Event.originalEvent verwenden Sie Event.originalEvent

Scroll-Richtung abrufen

$(document).on("wheel",function(e){
    console.log(e.originalEvent.deltaY)
    // Returns a value between -100 and 100 depending on the direction you are scrolling
})

Ein- und Ausschalten bestimmter Ereignisse über jQuery. (Named Listeners)

Manchmal möchten Sie alle zuvor registrierten Listener ausschalten.

//Adding a normal click handler
$(document).on("click",function(){
    console.log("Document Clicked 1")
});
//Adding another click handler
$(document).on("click",function(){
    console.log("Document Clicked 2")
});
//Removing all registered handlers.
$(document).off("click")

Ein Problem bei dieser Methode ist, dass ALLE Listener, die von anderen Plugins usw. an das document gebunden wurden, ebenfalls entfernt werden.

Meistens möchten wir alle Zuhörer abnehmen, die nur von uns angehängt werden.

Um dies zu erreichen, können wir benannte Hörer als

//Add named event listener.
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 1")
});
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 2")
});

//Remove named event listener.
$(document).off("click.mymodule");

Dadurch wird sichergestellt, dass ein anderer Klicklistener nicht versehentlich geändert wird.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

jQuery
Veranstaltungen

Suche…

Bemerkungen

Event-Handler anhängen und trennen

Hängen Sie einen Ereignishandler an

HTML

jQuery

Trennen Sie einen Ereignishandler

HTML

jQuery

jQuery

Delegierte Ereignisse

Beispiel HTML

Das Problem

Hintergrundinformationen - Weitergabe von Ereignissen

Lösung

Im Detail, wie die Lösung funktioniert

Ereignis zum Laden von Dokumenten .load ()

Ereignisse zum Wiederholen von Elementen ohne Verwendung von IDs

originalEvent

Scroll-Richtung abrufen

Ein- und Ausschalten bestimmter Ereignisse über jQuery. (Named Listeners)