jQuery odpowiednik metody addEventListener JavaScript

190

Próbuję znaleźć odpowiednik jQuery tego wywołania metody JavaScript:

document.addEventListener('click', select_element, true);

Dotarłem do:

$(document).click(select_element);

ale nie osiąga tego samego wyniku, co ostatni parametr metody JavaScript - wartość logiczna wskazująca, czy procedura obsługi zdarzeń powinna być wykonywana w fazie przechwytywania czy propagacji (według mojego zrozumienia z http://www.quirksmode.org /js/events_advanced.html ) - jest pominięty.

Jak określić ten parametr lub w inny sposób osiągnąć tę samą funkcjonalność za pomocą jQuery?

javascript jquery events event-handling dom-events Klecić
źródło
3
Przechwytywanie zdarzeń nie jest obsługiwane przez jQuery, ponieważ przechwytywanie zdarzeń nie jest obsługiwane przez IE, który obsługuje jQuery;) Czy szukasz kompatybilności z IE?
Crescent Fresh
Dzięki, Crescent Fresh - myślę, że to ma teraz sens. Potrzebuję kompatybilności z IE, więc chyba muszę zapomnieć o fazie przechwytywania.
Bungle

Odpowiedzi:

142

Nie wszystkie przeglądarki obsługują przechwytywanie zdarzeń (na przykład wersje Internet Explorera mniejsze niż 9 nie obsługują), ale wszystkie obsługują propagację zdarzeń, dlatego jest to faza używana do wiązania programów obsługi zdarzeń we wszystkich abstrakcjach między przeglądarkami, w tym jQuery.

Najbliższe do tego, czego szukasz w jQuery, używa bind()(zastąpione przez on()jQuery 1.7+) lub specyficznych dla zdarzenia metod jQuery (w tym przypadku click(), które i bind()tak wywołują wewnętrznie). Wszyscy używają fazy bąbelkowej podniesionego zdarzenia.

Russ Cam
źródło
6
Wygląda na to, że IE9 wreszcie to obsługuje. blogs.msdn.com/b/ie/archive/2010/03/26/…
jakieś
i dlaczego nie obsługują przechwytywania zdarzeń? jakie są wady przechwytywania zdarzeń?
Aakash
2
Mówiąc wprost, mówisz, że to, czego chce OP, nie jest możliwe - że musisz używać bulgotania i nie możesz przechwytywać. Dobrze?
Noumenon,
115

Począwszy od jQuery 1.7, .on()jest teraz preferowaną metodą wiązania zdarzeń, a nie .bind():

Od http://api.jquery.com/bind/ :

Począwszy od jQuery 1.7, metoda .on () jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu. We wcześniejszych wersjach metoda .bind () służy do dołączania modułu obsługi zdarzeń bezpośrednio do elementów. Programy obsługi są dołączone do aktualnie wybranych elementów w obiekcie jQuery, więc te elementy muszą istnieć w momencie wywołania funkcji .bind (). Aby uzyskać bardziej elastyczne wiązanie zdarzeń, zobacz omówienie delegowania zdarzeń w .on () lub .delegate ().

Strona dokumentacji znajduje się na stronie http://api.jquery.com/on/


źródło
Zaakceptowano odpowiedź, aby rozwiązać ten problem.
Użytkownik, który nie jest użytkownikiem,
14

Należy zauważyć, że metody zdarzeń jQuery nie uruchamiają / pułapkują loadna embedznaczniki zawierające SVG DOM, który ładuje się jako oddzielny dokument w embedznaczniku. Jedynym sposobem, w jaki znalazłem pułapkę na takie loadzdarzenie, było użycie surowego JavaScript.

To nie zadziała (próbowałem on/ bind/ loadmetody):

$img.on('load', function () {
    console.log('FOO!');
});

Działa to jednak:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);
tbjers
źródło
1
należy zauważyć, że jest to poprawny sposób, jeśli nie chcesz nadpisywać żadnych innych powiązanych procedur obsługi zdarzeń dla elementu (elementów).
r3wt
co to jest $img?
anatol
12

Powinieneś teraz użyć .on()funkcji do powiązania zdarzeń.


źródło
2 

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>
Rozwiń fragment kodu

antylopa
źródło
1

Oto doskonałe rozwiązanie tego problemu w Mozilla Development Network (MDN) dla standardowego JavaScript (jeśli nie chcesz polegać na jQuery lub ogólnie rozumiesz go lepiej):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

Oto omówienie przepływu zdarzeń z linku w powyższym leczeniu:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Niektóre kluczowe punkty to:

  • Umożliwia dodanie więcej niż jednego modułu obsługi zdarzenia
  • Daje to dokładniejszą kontrolę fazy, gdy słuchacz zostaje aktywowany (przechwytywanie vs. bulgotanie)
  • Działa na każdym elemencie DOM, nie tylko elementach HTML
  • Wartość „this” przekazana do zdarzenia nie jest globalnym obiektem (oknem), ale elementem, z którego element jest uruchamiany. To jest bardzo wygodne.
  • Kod starszych przeglądarek IE jest prosty i znajduje się pod nagłówkiem „Starsza wersja Internet Explorera i attachEvent”
  • Możesz dołączyć parametry, jeśli umieścisz moduł obsługi w funkcji anonimowej
Xitalogy
źródło