jQuery równoważne metody addEventListener Javascript w

Question

Próbuję znaleźć równowartość tej metody jQuery JavaScript wezwanie:

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

stałam miarę:

$(document).click(select_element); 

ale że nie robi” t osiąga taki sam wynik, jak ostatni parametr metody JavaScript - wartość logiczna, która wskazuje, czy procedura obsługi zdarzenia powinna zostać wykonana w fazie przechwytywania lub propagacji (zgodnie z moim rozumowaniem z http://www.quirksmode.org/js/events_advanced.html) - jest pominięta.

Jak określić ten parametr, lub w inny sposób uzyskać tę samą funkcjonalność, używając jQuery?

Answer 1

Nie wszystkie przeglądarki obsługują przechwytywanie zdarzeń (na przykład Internet Explorer w wersji mniej niż 9 nie), ale wszystkie obsługują zdarzenia bulgotanie, dlatego jest to faza używana do wiązania handlerów z wydarzeniami we wszystkich abstrakcjach między przeglądarkami, w tym jQuery.

Najbliższy tego co szukasz w jQuery używa bind() (zastąpione on() w jQuery 1.7+) lub metody jQuery specyficznych zdarzeń (w tym przypadku, click(), który wzywa bind() wewnętrznie tak). Wszyscy używają fazy bulgotania podniesionego wydarzenia.

Answer 2

Najbliżej byłoby funkcja wiąże:

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

$('#foo').bind('click', function() { 
    alert('User clicked on "foo."'); 
}); 

Answer 3

jako jQuery 1.7 .on() jest korzystnym sposobem zdarzenia wiązania, niż .bind():

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

jako jQuery 1.7 Sposób .on() jest preferowanym metoda dla dołączania procedur obsługi zdarzeń do dokumentu. W przypadku wcześniejszych wersji metoda .bind() służy do dołączania modułu obsługi zdarzeń bezpośrednio do elementów . Handlery są dołączane do aktualnie wybranych elementów w obiekcie jQuery, więc elementy te muszą istnieć w punkcie, w którym następuje wywołanie do .bind(). Aby uzyskać bardziej elastyczne wiązanie zdarzeń, zobacz dyskusję na temat delegowania zdarzeń w .on() lub .delegate().

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

Answer 4

Należy teraz używać funkcji .on() powiązać wydarzenia.

Answer 5

Oto doskonały zabieg na rozwój sieci Mozilla (MDN) tego problemu na standardowym JavaScript (jeśli nie chcesz polegać na jQuery lub zrozumieć to lepiej w ogóle):

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

kilka kluczowych punktów są:

• Pozwala na dodanie więcej niż jednego programu obsługi dla zdarzenia
• To daje lepszą kontrolę nad szczegółowymi fazie, gdy słuchacz zostaje aktywowany (przechwytywanie vs. bulgotanie)
• To działa na dowolnym elemencie DOM, nie tylko elementy HTML
• Wartość "this" przekazana do zdarzenia nie jest obiektem globalnym (okno), ale elementem, z którego element jest uruchamiany. Jest to bardzo wygodne.
• Kod dla spuścizny przeglądarek IE jest prosta i zawiera w rubryce „Legacy Internet Explorer i attachEvent”
• można uwzględnić parametry jeśli ująć obsługi w anonimowej funkcji

Answer 6

Jedną rzeczą, aby pamiętać, że Metody zdarzeń jQuery nie podpalają/nie przechwytują znaczników load na tagach zawierających SVG DOM, które ładują się jako oddzielny dokument w znaczniku embed. Jedynym sposobem, jaki znalazłem, aby uwięzić wydarzenie load, było użycie surowego JavaScript.

To nie zadziała (Próbowałem on/bind/load metody):

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

Jednak to działa:

$img[0].addEventListener('load', function() { 
    console.log('FOO!'); 
}, false);