Tutorial jQuery – III – Event-uri

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('test')

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 :w00t:

IMPORTANT!

M-ar ajuta foarte mult dacă primesc feedback de la începători. Vreau să știu dacă explic bine și pe înțelesul tuturor, deoarece, având o oarecare experiență îmi este destul de greu să-mi dau seama cât de accesibil este începătorilor.

Poți încerca toate comenzile de mai sus (exceptând $(document).ready()) în cosolă pe următoarea pagină:
Încearcă și tu!

5 Comentarii

Andrei a scris

Felicitari pentru tutorial!
1 singur lucru as dori sa spun: Este destul de neclara partea cu stopPropagation.
Prima data nu am inteles ca trebuie ca p sa fie inauntrul strong, si nu intelegeam de ce nu se intampla ce spuneai tu acolo. Plus ca nu ai explicat DE CE se intampla (bubbling…mi-a luat inca putin timp sa inteleg).

P.S: scuze daca cumva ai explicat conceptele in tutorialele urmatoare. Nu am apucat sa le citesc.

Dragos a scris

Salut!
Am si eu o problema, introduc dinamic html cod prin jquery si evenimentele de genul click, mouseover, mouseout nu mai lucreaza pentru codul introdus dinamic, pe cel static lucreaza perfect.
Care ar fi problema?
Merci anticipat.

Valentin a scris

Nu m-ai lamurit la partea cu return false si am alta problema, cand anume o functie primeste ca parametru ? In momentul in care se de o valoare de la utilizator(exemplu click-ul acela), se primeste date ? In cazul exemplului tau:

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

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter