Az eseményekkel dinamikus, a felhasználói interakcióra reagáló oldalakat hozhatunk létre. A legegyszerűbb példa az egérkattintás, billentyűleütés.
Az események csoportokba tartoznak, pl. teljes dokumentumra vonatkozó események, egérkattintással, illetve egérmozgással kapcsolatos események, űrlappal kapcsolatos események.
Document events
Az oldal betöltődésének vagy elhagyásának bizonyos szakaszait kezelhetjük le. A legfontosabb esemény a .ready() Amíg a DOM nem töltődik be, nem akarjuk, hogy bármilyen eseménykezelő metódus vagy egyéb függvény lefusson, hiszen nincsenek meg azok a html elemek, amiket manipulálni szeretnénk, ezért érdemes az egész kódot ebbe a metódusba ágyazni.
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").text("Az oldal betöltődött.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").text("Az oldal betöltődött.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
A ready eseménykezelő rendelkezik egy rövidített szintaxissal is:
$(function() {
// Handler for .ready() called.
});
Abban az esetben, amikor a kódunk betöltendő külső fájloktól (assets) függ, például oldalbetöltéskor már szükségünk van egy kép méreteire, akkor érdemesebb a load() eseményt használni. Amikor egy html elemhez adunk egy load() eseményt kezelő metódust, akkor az akkor fut le, amikor az elem, és annak minden függősége betöltődött. A load() használható minden olyan elemnél, ami kapcsolatban áll valamilyen URL-lel, például img, script, frame, iframe, window
$( "#myImage" ).load(function() {
// Handler for .load() called.
});
A fenti példában amint a kép betöltődik, az eseménykezelő lefut. A következő példa azt mutatja, hogyan kell eseménykezelőt írni arra az eseményre, amikor az oldal teljes egészében betöltődött, beleértve a grafikai elemeket is.
$( window ).load(function() {
// Run code
});
Az unload() esemény akkor következik be, amikor elnavigálunk az oldalról. Ebbe beletartozik az, amikor egy linkre kattintunk, beírunk egy új címet a címsorba, az előre vagy vissza gombokra kattintunk, vagy bezárjuk a böngésző ablakot. Az oldal újratöltése során is végbemegy az esemény. Csak a window elemhez köthető unload().
$( window ).unload(function() {
alert( "Bye now!" );
});
Mouse events
Az egérmozgással és kattintásokkal kapcsolatos eseményeknek is van JQuery megfelelője. A click() esemény akkor következik be, ha a kurzort egy elem fölé visszük, majd megnyomjuk és elengedjük a bal egérgombot. Bármilyen HTML elemre alkalmazható!
$('#target').click(function() {
alert('Handler for .click() called.');
});
A dbclick() esemény akkor következik be, ha egy elem felett duplán kattintunk. Bármilyen HTML elemre alkalmazható!
$('#target').dbclick(function() {
alert('Handler for .dbclick() called.');
});
A hover() segítségével egyszerre kezelhetjük le a mouseenter és mouseleave eseményeket. Akkor fut le, ha egy elem területére visszük a kurzort, vagy elhagyjuk azt. Bármilyen HTML elemre alkalmazható!
$( selector ).hover( handlerIn, handlerOut )
A fenti kód egy rövidített formája az alábbi szintaxisnak:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
A mousemove() esemény akkor következik be, ha egy elem felett mozgatjuk az egérmutatót. Az esemény objektumon keresztül lekérdezhető a kurzor aktuális pozíciója. Bármilyen HTML elemre alkalmazható!
$('#target').mousemove(function(event) {
alert('Handler for .mousemove() called.');
//event.pageX: kurzor poziciója az oldal x tengelyén
//event.pageY: kurzor poziciója az oldal y tengelyén
});
A mousedown() esemény akkor következik be, ha egy elem felett lenyomjuk (és lenyomva tartjuk) bármelyik egérgombot. Ennek mintájára pedig a mouseup() akkor következik be, amikor egy elem felett elengedjük ( a nyomva tartott ) egérgombot. Bármilyen HTML elemre alkalmazható! Ha külön akarjuk kezelni a különböző egérgombok eseményeit, akkor használhatjuk az esemény objektumban a which property-t. Nem minden böngésző támogatja az egérgombok külön kezelését. A which property értéke 1, ha a bal egérgombot nyomtuk meg, 2 ha a középsőt, és 3 ha a jobb egérgombot. A mousedown() és mouseup() és velük a which elsődleges használata a drag and drop stílusú interakció esetén jellemző, amikor biztosítani kell, hogy a drag műveletet az elsődleges (bal) egérgombbal kezdeményezték.
$( "#target" ).mousedown(function() {
alert( "Handler for .mousedown() called." );
});
Keyboard events
A keydown() esemény akkor következik be, amikor a felhasználó először üt le egy billentyűt. Bármilyen elemhez társítható, de csak a fókuszban álló elemnél fut le, melyek tipikusan űrlap elemek. Az esemény objektumot megvizsgálva kideríthető, hogy melyik billentyű került leütésre. Erre szolgál a which property. Keydown esemény minden billentyűnél kiváltódik, nem csak számoknál és betűknél. (pl alt, shit, tab, nyilak stb).
$( "#target" ).keydown(function() {
alert( "Handler for .keydown() called." );
});
A keypress() esemény szintén akkor következik be, amikor a felhasználó leüt egy billentyűt, azonban a keypress esemény nem váltódik ki az úgynevezett non-printing billentyűknél, pl del, esc, shift. Ezen billentyűleütések elkapásához a keydown esemény használható. Fontos megjegyezni, hogy a keypress működése nincs biztosítva semmilyen hivatalos specifikációval. Implementálása platformok, böngészők, és böngésző verziók között eltérhet.
$( "#target" ).keypress(function() {
console.log( "Handler for .keypress() called." );
});
A keyup() esemény akkor következik be, amikor a felhasználó felenged egy nyomva tartott billentyűt. Bármilyen elemhez társítható, de csak a fókuszban álló elemnél fut le, melyek tipikusan űrlap elemek. Az esemény objektumot megvizsgálva kideríthető, hogy melyik billentyű került felengedésre. Erre szolgál a which property.
$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
Form events
Egy form elemein térténő eseményeket tudjuk lekezelni ezekkel a metósudokkal. Az itt felsorolt események általában csak form elemen belül található elemeken használható, pl. input, select
Pl ha egy input mezőben kijelölünk valamit, akkor a div-ben erről értesítést kapunk.
$(":input").select( function () {
$("div").text("Valami ki lett jelölve").show().fadeOut(1000);
});
A blur() esemény akkor következik be, ha egy elem elveszíti a fókuszt. Ez történhet billentyű parancsokkal, például TAB billentyűvel navigálás másik form elemre, vagy egérkattintással a dokumentum bármely más pontjára.
$( "#target" ).blur(function() {
alert( "Handler for .blur() called." );
});
A focusout() esemény akkor következik be, ha egy elem, vagy az elem bármelyik gyereke elveszíti a fókuszt. Ez hasonlóan történik, mint a blur() esetében. A fő különbség tehát az, hogy a focusout támogatja az úgynevezett event bubblingot.
$( "#target" ).focusout(function() {
alert( "Handler for .focusout called." );
});
A focus() esemény akkor következik be, ha egy elem megkapja a fókuszt. Főként input, select, és anchor (link) elemeken használható. A fókuszt kapott elemet a legtöbb böngésző megkülönbözteti valamilyen vizuális módon a többi elemtől. Egy elem fókuszba kerülhet egérkattintással vagy billentyű parancsokkal.
$( "#target" ).focus(function() {
alert( "Handler for .focus() called." );
});
A focusin() esemény akkor következik be, ha egy elem, vagy az elem bármelyik szülője fókuszba kerül. Ez hasonlóan történik, mint a focus() esetében. A fő különbség tehát az, hogy a focusin() támogatja az úgynevezett event bubblingot.
$( "#target" ).focusin(function() {
alert( "Handler for .focusin() called." );
});
A change() esemény akkor következik be, ha egy elem tartalma megváltozik. Input, textarea és select elemeken használható. Selectboxok, checkboxok és radio gombok esetén azonnal bekövetkezik, amint a felhasználó beállítja az értékeket. Szöveges mezők esetén az esemény bekövetkezéséhez el kell veszítenie az adott elemnek a fókuszt.
$( "#target" ).focus(function() {
alert( "Handler for .focus() called." );
});
A select() esemény akkor következik be, ha egy szöveges input mezőn vagy textarea elemen kijelölünk egy szövegrészletet (például másolás céjából).
$( "#target" ).select(function() {
alert( "Handler for .select() called." );
});
A submit() esemény akkor következik be, ha a felhasználó megkísérel elküldeni egy űrlapot. A definícióból adódóan a submit() csak form elemen használható! Tipikus használata a kliens oldali validálás, azaz az, hogy egy adott űrlap az igényeknek megfelelően van-e kitöltve. Az alábbi kód például nem engedi a 13-as számot elküldeni egy űrlap első input mezőjében.
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() == 13 ) {
$( "span" ).text( "A 13 nem szerencsés szám, kérjük válasszon másikat!" ).show();
event.preventDefault();
}
});
Event Handler Attachment
Összetettebb események kezelését tehetjük lehetővé ezekkel a metódusokkal.
Pl:
Hozzá adhatunk eseményt az összes létező, vagy a jövőben létrejövő elemhez, amit a szelektor elfogad:
$("p").live("click", function(){
$(this).after("<p>Katt!</p>");
});
A fent bemutatott live metódus a JQuery 1.7-től elavultnak van megjelölve, JQuery 1.9-től pedig teljes törlésre került!
Helyette megjelent két új eseménykezelő metódus, az on() és az off(). A különálló metódusok használata helyett már ez ajánlott, így a korábban bemutatott eseménykezelő példák mind lecserélhetőek
az alábbi formára:
$(selector).on("click", function(){
//a selectorral kijelölt elemre kattintás eseménykezelő metódusa
});
A korábban említett live funkcionalitása az alábbi módon valósítható meg az on() metódust használva:
$(document).on("click", "p", function(){
//eseménykezelő az összes, és az összes jövőben létrejövő p elemhez
});
Az off() metódussal iratkozhatunk le egy eseményről
$("p").off("click");
Hozzá adhatunk egy elemhez olyan eseményt, ami csak egyszer hajtódhat végre:
$("div").one("click", function(){
//akármi
});
Esemény objektum, Event Delegation/Propagation
Az esemény objektum a visszatérési függvény hívás során megadható objektum, mely számos dolgot megmutat az aktuális eseményről, például egérrel kapcsolatos események esetén a kurzor pozícióját.
$("div").on("click", function(event){
console.log(event);
});
$("div").on("click", function(event){
event.preventDefault(); //alapértelmezett működési mechanizmus megakadályozása
});
A JQuery normalizálja a következő property-ket a böngészőfüggetlen használat érdekében: target, relatedTarget, pageX, pageY, which, metaKey.
A következő értékek is szerepelnek az esemény objektumban, de értékük a pontos eseménytől függően lehet, hogy undefined:
altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which
Az event delegation az események felhalmozódásának a problémáját oldja meg. A legjobb fordítás talán az esemény átruházás. Nem közvetlenül az elemekhez rendeljük az eseményt, hanem a szülő elemhez, amiben megtalálhatóak az elemek. Csak egy eseményt hozunk létre, ami az aktuális eseményt megvizsgálja és alkalmazza a gyerek elemeken.
$("ul").on("click", "li", function(){
alert("Esemény átruházás");
});
A fenti példa hatására egy lista minden gyerek listaelemére kiváltódik a klikk esemény, valamint a később dinamikusan felvett új listaelemekre is érvényes lesz.
Ha egy ős–leszármazott kapcsolat során, mind a ős és mind a leszármazott kap egy eseményt, akkor a gyerek esemény megörökli az ős elem eseményét. Ez a jelenség az Event Propagation vagy esemény terjedés. A leszármazott eseményt meghívjuk az event objektummal és használjuk a stopPropagation() függvényt, ami megállítja, hogy lefusson az ős eseménye.
$(function() {
$("span").on("click", function(event) {
alert("Span elem kattintás!");
event.stopPropagation();
});
$("p").on("click", function() {
alert("P elem kattintás!");
});
});
Böngésző események
Az error esemény a dokumentum által hivatkozott elemekhez, állományokhoz rendelhető, amelyeket a böngésző tölt be. Akkor hívódik meg, amikor az elemet nem sikerült betölteni. Az alábbi példában egy book id-val rendelkező kép sikertelen betöltését kezeljük le, és helyezünk be egy alternatív "hiányzik" képet a helyére.
$( "#book" )
.error(function() {
alert( "Handler for .error() called." )
})
.attr( "src", "missing.png" );
A resize esemény a böngészőablak átméretezésekor váltódik ki, így ez csak a window elemhez köthető.
$( window ).resize(function() {
//Handler for .resize() called
});
A scroll esemény a böngészőben való görgetés során következik be. A görgetés történhet magában a böngészőablakban, framekben, vagy overflow CSS tulajdonsággal rendelkező elemekben.
$( "#target" ).scroll(function() {
//Handler for .scroll() called
});