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:

$(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ń:

$(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ą:

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

$('#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:

<p>click</p>

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

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

Zobacz też

metoda off,
która pozwala usunąć obsługę zdarzeń z elementu
metoda one,
która pozwala zdarzeniu zadziałać raz, a następnie automatycznie usunąć obsługę
obiekt event,
który zawiera informacje o zdarzeniu
metoda trigger,
która pozwala uruchomić wszystkie obsługi zdarzeń, powiàzane z elementem dla zdarzeń danego typu
metoda JavaScript bind,
która pozwala powiązać kontekst z funkcją