Metoda on

Metoda on permite adăugarea unui gestionar de evenimente la un element. Pentru a elimina gestionarul se poate utiliza metoda off, pentru ca evenimentul să se declanșeze o singură dată, iar apoi gestionarul să se elimine singur - utilizați metoda one. Elementele cărora le atașăm gestionarul trebuie să existe în momentul apelului on.

Sintaxă

Astfel adăugăm un gestionar de evenimente la un element, ca prim parametru sub formă de șir de caractere este transmis unul sau mai multe evenimente separate prin spații, al doilea parametru transmitem un selector de filtrare suplimentar al descendenților din interiorul elementului, al treilea - date suplimentare, care sunt transmise în gestionar în proprietatea event.data la declanșarea evenimentului. Al doilea și al treilea parametru sunt opționali. Al patrulea transmitem funcția-gestionar, în care este transmis obiectul evenimentului și parametrii suplimentari opționali. Dacă în locul funcției-gestionar se transmite false, atunci funcția va returna pur și simplu false:

$(selector).on(evenimente, [selector], [date], funcție-gestionar(obiect eveniment, [parametri suplimentari]));

Se poate utiliza metoda on altfel, atunci în primul parametru este transmis un obiect JavaScript, unde cheile - tipul evenimentului, iar valorile - funcțiile-gestionare, apelate pentru evenimente:

$(selector).on({'tip eveniment': handler}, [selector], [date]);

Dacă nu transmitem selectorul suplimentar, atunci evenimentul se declanșează pe elementul căruia i atașăm gestionarul, în caz contrar - pe elementul-descendent care corespunde acestui selector (evenimente delegată). Același gestionar de eveniment poate fi atașat la element de mai multe ori.

Exemplu

Să afișăm în alert, textul paragrafului cu #test la click pe el, click-urile pe alte paragrafe nu vor duce la nimic:

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

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

Exemplu

Să afișăm la click pe paragraf datele, pe care le-am transmis în metoda on. Vom utiliza funcția-gestionar testFunc, pe care am creat-o:

<p>click</p>

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

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

Vedeți și

metoda off,
care permite eliminarea gestionarului de evenimente la un element
metoda one,
care permite evenimentului să se declanșeze o singură dată, apoi să elimine automat gestionarul
obiectul event,
care conține informații despre eveniment
metoda trigger,
care permite declanșarea tuturor gestionarilor de evenimente, atașate la element pentru evenimente de tipul specificat
Metoda JavaScript bind,
care permite atașarea contextului la o funcție