Az on metódus

Az on metódus lehetővé teszi egy eseménykezelő hozzáadását egy elemhez. A kezelő eltávolításához használhatod a off metódust, ha azt szeretnéd, hogy az esemény csak egyszer aktiválódjon, majd a kezelő magától eltávolítsa magát - használd a one metódust. Azok az elemek, amelyekhez kezelőt rendelünk, már létezniük kell az on hívásakor.

Szintaxis

Így adunk hozzá eseménykezelőt egy elemhez, az első paraméterként egy vagy több, szóközzel elválasztott eseményt adunk meg sztring formájában, a második paraméterként egy további szűrő selektort adunk meg az elemen belüli leszármazott elemekhez, a harmadikként - további adatokat, amelyek az eseménykezelőnek a event.data tulajdonságában kerülnek továbbításra az esemény bekövetkeztekor. A második és harmadik paraméter opcionális. A negyedikként egy eseménykezelő függvényt adunk meg, amely az eseményobjektumot és opcionális további paramétereket kapja meg. Ha az eseménykezelő függvény helyett false-t adunk meg, akkor a függvény egyszerűen false-t ad vissza:

$(selector).on(events, [selector], [data], handler(eventObject, [extraParameters]));

Használhatjuk az on metódust más módon is, ekkor az első paraméterként egy JavaScript objektumot adunk meg, ahol a kulcsok - az eseménytípusok, az értékek pedig - az eseményekre meghívott eseménykezelő függvények:

$(selector).on({'eventType': handler}, [selector], [data]);

Ha nem adunk meg további szelektort, akkor az esemény azon az elemen aktiválódik, amelyhez hozzárendeltük a kezelőt, ellenkező esetben - azon a leszármazott elemen, amely megfelel ennek a szelektornak (delegált események). Ugyanaz az eseménykezelő többször is hozzárendelhető egy elemhez.

Példa

Alert-ban jelenítsük meg a #test azonosítójú bekezdés szövegét, amikor rákattintanak, más bekezdésekre való kattintás nem vezet semmihez:

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

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

Példa

Kattintáskor a bekezdésre jelenítsük meg az adatokat, amelyeket átadtunk az on metódusnak. Használjuk a testFunc eseménykezelő függvényt, amelyet létrehoztunk:

<p>click</p>

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

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

Lásd még

a off metódus,
amely lehetővé teszi egy eseménykezelő eltávolítását egy elemből
a one metódus,
amely lehetővé teszi, hogy egy esemény egyszer aktiválódjon, majd automatikusan eltávolítja a kezelőt
az event objektum,
amely információt tartalmaz az eseményről
a trigger metódus,
amely lehetővé teszi az eseménykezelők mindegyikének meghívását, amelyek egy elemhez egy adott típusú eseményhez vannak rendelve
a JavaScript bind metódus,
amely lehetővé teszi a kontextus egy függvényhez kötését