Aşa cum am promis, voi face o scurtă introducere în event-uri. Întâi de toate, trebuie să fac o completare pentru primul articol:

Unul din marile avantaje ale jQuery este că majoritatea efectelor/event-urilor suportă chaining (înlănţuire sună aiurea), astfel, cu un singur selector se pot face mai multe lucruri. Altfel spus, cu linia:

$('strong:eq(0)').addClass('rosu').css(fontSize, '2em').fadeOut(200)

Se adaugă o clasă, se schimbă dimensiunea fontului şi se schimbă opacitatea.

De asemenea, toate testele sunt făcute în Firefox, tocmai datorită lui Firebug. Dar cum jQuery este o librărie cross browser, nu trebuie să îţi faci niciun fel de problemă despre compatibilitate cu alte browsere.

Acestea fiind spuse, hai să „intrăm în pâine” cu event-urile. Ca orice termen din programare, sună destul de aiurea tradus în română. Aşadar… nu va fi „evenimente” ci events/event-uri.

Un event îţi permite să setezi o interacţiune dintre utilizator şi pagină. Un click, de exemplu, este un event. La fel şi mouseover, mouseout, keyup, keydown, ş.a.m.d.

Modul de setare pentru un event este foarte simplu şi funcţionează în „spiritul” jQuery : selector CSS:

$('h1').bind('click', function(e){
	alert('Click!')
});

Unele event-uri acceptă un stil ceva mai scurt:

$('h1').click(function(e){
	alert('Click!')
});

În ambele cazuri observi parametrul e. Acesta îţi oferă acces la câteva variabile:

Printre cele mai importante valori returnate în cazul unui click sau mouseover sunt pageX şi pageY. Acestea îţi indică poziţia cursorului.

Desigur, acest stil nu funcţionează pentru toate event-urile, ceea ce înseamnă că cel mai sigur să foloseşti metoda cu bind(). De fiecare dată, orice event returnează obiectul this. Acest obiect este fix elementul pe care este stabilit event-ul. În cazul nostru, h1.

Una din setările esenţiale în cazul în care sunt mai multe elemente şi ai event-uri pe fiecare, este stopPropagation(). Se dă codul următor:

$('p').bind('click', function(e){
	alert('p Click!')
});
$('strong').bind('click', function(e){
	alert('strong Click!')
});

Totul funcţionează corespunzător, doar că în momentul când se face click pe strong se declanşează şi event-ul de pe p. Soluţia este, aşa cum am zis, stopPropagation(). Acesta se foloseşte în felul următor:

$('p').unbind('click').bind('click', function(e){
	alert('p Click!')
});
$('strong').unbind('click').bind('click', function(e){
	e.stopPropagation();
	alert('strong Click!')
});

Observi că a apărut o nouă comandă: unbind('click'). Aceasta anulează orice alt bind('click') scris anterior. Dacă se foloseşte doar unbind() (fără niciun alt parametru), se anulează orice alt event setat anterior (fie click, fie mouseover, fie orice altceva).

Un mic amănunt fără de care s-ar putea să începi să-ţi smulgi părul din cap în cazul în care ai un event pe un link este că trebuie să adaugi un return false;:

$('a').unbind('click').bind('click', function(e){
	alert('a Click!');
	return false;
});

De notat că return false; este chiar la sfârşit, altfel tot ce este după return false; nu va funcţiona. De exmplu:

$('a').unbind('click').bind('click', function(e){
	return false;
	alert('a Click!');
});

Nu va funcţiona.

Un alt event foarte important este .ready(). Este important pentru că îţi permite rularea unor anumite funcţii după ce se încarcă toată pagina:

$(document).ready(function(){
	alert(1);
});

ATENŢIE ! Această comandă NU va funcţiona în consolă, deoarece documentul este deja încărcat.
ATENŢIE ! $(document) NU are ghilimele.

Aceeaşi comandă, scrisă puţin mai scurt, arată aşa:

$().ready(function(){
	alert(1);
});

Eu prefer varianta lungită (prima variantă). Eventul ready() se poate aplica şi pe imagini, astfel încât poţi rula o funcţie în momentul în care o imagine s-a încărcat. Desigur, nu este recomandat să se folosească pe TOATE imaginile, ci pe o anume imagine.

După cum am precizat la început, jQuery permite chaining. Astfel, putem seta mai multe event-uri pe un element folosind un singur selector:

$('a').unbind().bind('click', function(e){
	alert('a Click!');
	return false;
}).hover(function(){
	$(this).css({fontSize: '2em'})
}, function(){
	$(this).css({fontSize: '1em'})
});

Observi că al doilea event este hover. Acesta are două funcţii ca parametru: una pentru mouseover, alta pentru mouseout.

O altă funcţie utilă este trigger. Aceasta, aşa cum îi spune şi numele, îţi permite să declanşezi un event fără ca utilizatorul să fi interacţionat în vreun fel. De exemplu:

$('p').trigger('click');

Simulează eventul ‘click’  pe link. ATENŢIE ! Deoarece JS rulează în ordinea în care e scris codul, orice trigger trebuie apelat DUPĂ ce se setează un event, altfel neavând niciun rezultat.

În cazul în care există elemente introduse dinamic în cod (le voi explica într-un alt episod), event-urile NU se aplică şi noilor elemente. Astfel:

$('p').append('<a href="#">test</a>')

Va returna true la click şi nu va afişa nicio alertă. Soluţia ar fi un refresh pentru event-uri sau folosirea plugin-ului livequery.

Ultimul lucru despre care îţi vorbesc azi este comanda one(). Aceasta aproape identică cu bind() cu diferenţa că one() este “atent” la event-ul respectiv o singură dată. Astfel:

$('p').one('click', function(e){
	alert('p Click!')
});

Arată alertă doar pentru primul click.

Consider că am scris suficient despre event-uri. În câteva zile urmează un episodul despre efecte. Întrebări, nelămuriri sau felicitări sunt de aşteptat într-un comment!

PS: rog a mi se scuza eventualele greşeli. Sunt răcit „cobză” şi sunt fericitul posesor a peste 39°C la momentul când scriu aceste rânduri

Poţi încerca toate comenzile de mai sus (exceptând $(document).ready()) în cosolă pe următoarea pagină: