Metóda on

Metóda on umožňuje pridať obsluhu udalostí k elementu. Na odstránenie obsluhy je možné použiť metódu off, aby udalosť zafungovala iba raz a potom sa obsluha odstránila sama - použite metódu one. Elementy, ku ktorým pripájame obsluhu, musia existovať v čase volania on.

Syntax

Takto pridáme obsluhu udalostí k elementu, ako prvý parameter v podobe reťazca sa odovzdáva jedna alebo viac udalostí oddelených medzerami, druhým parametrom odovzdávame doplnkový filtrujúci selektor potomkov vo vnútri elementu, tretím - doplnkové dáta, ktoré sa odovzdajú do obsluhy vo vlastnosti event.data pri spustení udalosti. Druhý a tretí parameter sú voliteľné. Štvrtým odovzdávame funkciu-obsluhu, do ktorej sa odovzdáva objekt udalosti a voliteľné doplnkové parametre. Ak namiesto funkcie-obsluhy odovzdáme false, tak funkcia jednoducho vráti false:

javascript$(selektor).on(udalosti, [selektor], [dáta], funkcia-obsluha(objekt udalosti, [doplnkové parametre]));

Je možné použiť metódu on inak, vtedy do prvého parametra sa odovzdáva objekt JavaScript, kde kľúče - typ udalosti, a hodnoty - funkcie-obsluhy, volané pre udalosti:

javascript$(selektor).on({'typ udalosti': handler}, [selektor], [dáta]);

Ak neodovzdávame doplnkový selektor, tak udalosť sa spustí na elemente, ku ktorému sme pripojili obsluhu, inak - na elemente-potomkovi, ktorý zodpovedá tomu selektoru (delegované udalosti). Rovnaká obsluha udalosti môže byť pripojená k elementu viackrát.

Príklad

Poďme do alert, zobraziť text odseku s #test pri kliknutí naň, kliknutia na iné odseky k ničomu nepovedú:

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

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

Príklad

Poďme pri kliknutí na odsek zobraziť dáta, ktoré sme odovzdali do metódy on. Použijeme funkciu-obsluhu testFunc, ktorú sme vytvorili:

html<p>click</p>

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

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

Pozri tiež