jQuery => Wydarzenia

Uwagi

jQuery wewnętrznie obsługuje zdarzenia poprzez funkcję addEventListener . Oznacza to, że powiązanie więcej niż jednej funkcji z tym samym zdarzeniem dla tego samego elementu DOM jest całkowicie legalne.

Dołącz i odłącz moduły obsługi zdarzeń

Dołącz moduł obsługi zdarzeń

Od wersji 1.7 jQuery ma interfejs API zdarzeń .on() . W ten sposób każde standardowe zdarzenie javascript lub zdarzenie niestandardowe może zostać powiązane z aktualnie wybranym elementem jQuery. Istnieją skróty, takie jak .click() , ale .on() daje więcej opcji.

HTML

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

jQuery

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

Odłącz moduł obsługi zdarzeń

Oczywiście masz również możliwość odłączenia zdarzeń od obiektów jQuery. Robisz to za pomocą .off( events [, selector ] [, handler ] ) .

HTML

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

jQuery

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

Kliknięcie przycisku $(this) spowoduje odniesienie do bieżącego obiektu jQuery i usunie z niego wszystkie dołączone procedury obsługi zdarzeń. Możesz także określić, który moduł obsługi zdarzeń powinien zostać usunięty.

jQuery

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

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

W takim przypadku zdarzenie w centrum mouseenter będzie nadal działać po kliknięciu.

Delegowane wydarzenia

Zacznijmy od przykładu. Oto bardzo prosty przykładowy HTML.

Przykładowy 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>

Problem

Teraz w tym przykładzie chcemy dodać detektor zdarzeń do wszystkich elementów <a> . Problem polega na tym, że lista w tym przykładzie jest dynamiczna. Elementy <li> są dodawane i usuwane w miarę upływu czasu. Jednak strona nie odświeża się między zmianami, co pozwoliłoby nam użyć detektorów prostych zdarzeń kliknięcia obiektów linków (tj. $('a').click() ).

Problemem jest to, jak dodawać zdarzenia do elementów <a> , które przychodzą i odchodzą.

Informacje podstawowe - propagacja zdarzeń

Zdarzenia delegowane są możliwe tylko z powodu propagacji zdarzeń (często nazywanej propagacją zdarzeń). Za każdym razem, gdy zostanie uruchomione zdarzenie, będzie ono bańki aż do korzenia dokumentu. Delegują obsługę zdarzenia do niezmiennego elementu przodka, stąd nazwa zdarzenia „delegowane”.

Tak więc w powyższym przykładzie kliknięcie linku <a> spowoduje wywołanie zdarzenia „kliknięcie” w tych elementach w następującej kolejności:

za
li
ul
ciało
HTML
katalog główny

Rozwiązanie

Wiedząc, co robi bąbelkowanie zdarzeń, możemy złapać jedno z poszukiwanych zdarzeń, które rozprzestrzeniają się za pośrednictwem naszego HTML.

Dobrym miejscem do złapania go w tym przykładzie jest element <ul> , ponieważ ten element nie jest dynamiczny:

$('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
});

Powyżej:

Mamy „ul”, który jest odbiorcą tego odbiornika wydarzeń
Pierwszy parametr („kliknięcie”) określa, które zdarzenia próbujemy wykryć.
Drugi parametr („a”) służy do zadeklarowania, skąd ma pochodzić zdarzenie (wszystkich elementów potomnych pod adresatem odbiorcy tego zdarzenia, ul).
Wreszcie trzeci parametr to kod uruchamiany, jeśli spełnione są wymagania pierwszego i drugiego parametru.

Szczegółowo, jak działa rozwiązanie

Użytkownik klika element <a>
To powoduje zdarzenie kliknięcia elementu <a> .
Wydarzenie zacznie bulgotać w kierunku katalogu głównego dokumentu.
Zdarzenie przechodzi najpierw do elementu <li> , a następnie do elementu <ul> .
Detektor zdarzeń jest uruchamiany, ponieważ do elementu <ul> dołączony jest detektor zdarzeń.
Detektor zdarzeń najpierw wykrywa zdarzenie wyzwalające. Zdarzenie bulgotania to „kliknięcie”, a słuchacz „kliknięcie”, to przejście.
Sprawdzanie przez słuchacza próbuje dopasować drugi parametr („a”) do każdego elementu w łańcuchu bąbelkowym. Ponieważ ostatnim elementem w łańcuchu jest „a”, to pasuje do filtra i to też jest przepustka.
Kod w trzecim parametrem jest prowadzony za pomocą dopasowanego elementu, jak to this . Jeśli funkcja nie zawiera wywołania stopPropagation() , zdarzenie będzie kontynuowało propagację w górę w kierunku katalogu głównego ( document ).

Uwaga: Jeśli odpowiedni niezmienny przodek nie jest dostępny / wygodny, powinieneś użyć document . Jako nawyk nie używaj 'body' z następujących powodów:

body ma błąd związany ze stylizacją, który może oznaczać, że zdarzenia myszy nie powodują bąbelkowania. Jest to zależne od przeglądarki i może się zdarzyć, gdy obliczona wysokość ciała wynosi 0 (np. Gdy wszystkie elementy potomne mają pozycje bezwzględne). Zdarzenia myszy są zawsze przenoszone bąbelkowo na document .
document zawsze istnieje w skrypcie, więc możesz dołączyć delegowane procedury obsługi do document poza programem obsługującym DOM i mieć pewność, że nadal będą działać.

Zdarzenie ładowania dokumentu .load ()

Jeśli chcesz, aby skrypt czekał na załadowanie określonego zasobu, takiego jak obraz lub plik PDF, możesz użyć .load() , który jest skrótem do skrótu .on( "load", handler) .

HTML

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

jQuery

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

Zdarzenia powtarzających się elementów bez użycia identyfikatorów

Problem

Na stronie znajduje się szereg powtarzających się elementów, które musisz wiedzieć, w którym wystąpiło zdarzenie, aby zrobić coś z tym konkretnym wystąpieniem.

Rozwiązanie

Daj wszystkim wspólnym elementom wspólną klasę
Zastosuj detektor zdarzeń do klasy. this wewnętrzna procedura obsługi zdarzeń jest pasującym elementem selektora, w którym wystąpiło zdarzenie
Przejdź do zewnętrznego najbardziej powtarzalnego kontenera dla tego wystąpienia, zaczynając od this
Użyj find() w tym kontenerze, aby wyizolować inne elementy specyficzne dla tego wystąpienia

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

Czasami pojawią się właściwości, które nie są dostępne w zdarzeniu jQuery. Aby uzyskać dostęp do podstawowych właściwości, użyj Event.originalEvent

Uzyskaj kierunek przewijania

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

Włączanie i wyłączanie określonych zdarzeń za pomocą jQuery. (Nazwani słuchacze)

Czasami chcesz wyłączyć wszystkich wcześniej zarejestrowanych słuchaczy.

//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")

Problem z tą metodą polega na tym, że WSZYSTKIE detektory przypisane do document przez inne wtyczki itp. Również zostałyby usunięte.

Najczęściej chcemy odłączyć wszystkich słuchaczy przywiązanych tylko przez nas.

Aby to osiągnąć, możemy powiązać nazwanych słuchaczy jako:

//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");

To gwarantuje, że żaden inny detektor kliknięć nie zostanie przypadkowo zmodyfikowany.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

jQuery
Wydarzenia

Szukaj…

Uwagi

Dołącz i odłącz moduły obsługi zdarzeń

Dołącz moduł obsługi zdarzeń

HTML

jQuery

Odłącz moduł obsługi zdarzeń

HTML

jQuery

jQuery

Delegowane wydarzenia

Przykładowy HTML

Problem

Informacje podstawowe - propagacja zdarzeń

Rozwiązanie

Szczegółowo, jak działa rozwiązanie

Zdarzenie ładowania dokumentu .load ()

Zdarzenia powtarzających się elementów bez użycia identyfikatorów

originalEvent

Uzyskaj kierunek przewijania

Włączanie i wyłączanie określonych zdarzeń za pomocą jQuery. (Nazwani słuchacze)