Metoda on

Metoda on pozwala dodać obsługę zdarzeń do elementu. Aby usunąć obsługę można skorzystać z metody off, aby zdarzenie zadziałało tylko raz, a następnie obsługa usunęła się sama - skorzystaj z metody one. Elementy, do których podpinamy obsługę muszą istnieć w momencie wywołania on.

Składnia

W ten sposób dodajemy obsługę zdarzeń do elementu, jako pierwszy parametr w postaci ciągu znaków przekazywane jest jedno lub kilka zdarzeń oddzielonych spacjami, drugim parametrem przekazujemy dodatkowy selektor filtrujący elementy potomne wewnątrz elementu, trzecim - dodatkowe dane, które są przekazywane do obsługi we właściwości event.data po wystąpieniu zdarzenia. Drugi i trzeci parametr są opcjonalne. Czwartym przekazujemy funkcję obsługi, do której przekazywany jest obiekt zdarzenia i opcjonalne dodatkowe parametry. Jeśli zamiast funkcji obsługi przekażemy false, to funkcja po prostu zwróci false:

javascript$(selektor).on(zdarzenia, [selektor], [dane], funkcja-obsługi(obiekt zdarzenia, [dodatkowe parametry]));

Można skorzystać z metody on inaczej, wtedy w pierwszym parametrze przekazywany jest obiekt JavaScript, gdzie klucze - typ zdarzenia, a wartości - funkcje obsługi, wywoływane dla zdarzeń:

javascript$(selektor).on({'typ zdarzenia': handler}, [selektor], [dane]);

Jeśli nie przekazujemy dodatkowego selektora, to zdarzenie jest wyzwalane na elemencie, do którego dołączamy obsługę, w przeciwnym razie - na elemencie potomnym, który odpowiada temu selektorowi (zdarzenia delegowane). Ta sama obsługa zdarzenia może być powiązana z elementem wiele razy.

Przykład

Wyświetlmy w alert, tekst akapitu z #test po kliknięciu na niego, kliknięcia w inne akapity do niczego nie doprowadzą:

html<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

javascript$('#test').on('click', function() {
  alert( $(this).text() );
});

Przykład

Po kliknięciu na akapit wyświetlmy dane, które przekazaliśmy do metody on. Wykorzystajmy funkcję obsługi testFunc, którą utworzyliśmy:

html<p>click</p>

javascriptfunction testFunc(event) {
  alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Zobacz też