Adaugarea de ascultatori la evenimente in jQuery se face apeland asupra unui set jQuery metoda bind: $().bind. Aceasta primeste trei parametri, dintre care al doilea este optional (pana acum, cand vorbeam de elemente optionale, acestea erau ultimele in lista de parametri), si ataseaza ascultatorul pentru fiecare element din set. Primul parametru este un string – tipul evenimentului, la fel ca la evenimentele DOM2, sau mai multe astfel de tipuri de evenimente separate intre ele de spatii (in caz ca vrem sa atasam acelasi ascultator pentru mai multe tipuri de evenimente). Al doilea parametru poate avea orice tip si va fi disponibil in parametrul transmis functiei ascultator, campul data al acestuia. Totusi, de cele mai multe ori nu va fi nevoie de date aditionale, din moment ce obtinem cam toate informatiile de care avem nevoie din parametrul trimis functiei ascultator. Functia ascultator este al treilea parametru; ar trebui sa astepte ca parametru un obiect asemanator cu instantele de Event nativ al JS (dar nu sunt instante de Event, pentru ca, asa cum am mai spus, jQuery nu modifica niciun obiect nativ). Asta inseamna ca va avea toate campurile din Event-ul DOM2 (sau cel putin, toate campurile care aveau si un echivalent in window.event-ul din IE). Este normalizat, astfel ca este disponibil si in IE (deci nu e nevoie sa lucram cu window.event, iar campurile acestui parametru vor fi cele din DOM2, chiar si in IE). Un lucru foarte interesant este ca atunci cand adaugam ascultatori de evenimente, putem crea namespace-uri pentru acei ascultatori. Astfel, daca apelam $().bind('click.namespaced',function (event) { /* ... */ }); am creat un namespace cu numele namespaced. Asta ne va ajuta sa stergem ascultatori la evenimente, cum vom vedea imediat.
Stergerea ascultatorilor pentru toate elementele dintr-un set se face prin $().unbind; daca nu este trimis niciun parametru, vor fi stersi toti ascultatorii la toate tipurile de evenimente. Daca este transmis un parametru, este asteptat sa fie string, si vor fi stersi toti ascultatorii de acel tip. Putem folosi namespace-urile pe care le folosisem cand am atasat ascultatori elementelor. Este astfel foarte simplu sa stergem doar o parte din ascultatori, nu toti. De asemenea, folosirea namespace-urilor ajuta stergea de ascultatori fara sa folosim functii cu nume (daca va amintiti din articolul original despre evenimente in JS, atunci cand stergeam doar anumiti ascultatori trebuia sa folosim functii cu nume). Altfel, putem folosi functii cu nume si atunci al treilea parametru al lui unbind va fi functia – ascultator pe care vrem s-o stergem.
Declansarea evenimentelor se face apeland $().trigger sau $().triggerHandler. Diferenta intre cele doua este ca in cazul al doilea nu sunt declansate si actiunile implicite ale browser-ului pentru acel tip de eveniment (de exemplu, pentru evenimentele submit, actiunea implicita ar fi trimiterea datelor din formular pentru procesare). Cele doua primesc doi parametri. Primul, tipul de eveniment pentru care vor fi declansati ascultatorii. Al doilea, optional, reprezinta datele transmise ascultatorului (care, cum spuneam, vor fi disponibile iun functia ascultator in campul data al parametrului primit).
Alte trei cazuri comune in practica si care sunt usor de abordat cu jQuery sunt:
- cazul in care un ascultator se declanseaza o singura data:
$().oneare exact aceeasi sintaxa cu$().bind, dar ascultatorul se va declansa numai prima data, apoi va fi sters - cazul in care vrem sa se intample ceva cand mouse-ul intra in zona unui element (eng. hovers) si altceva cand mouse-ul paraseste aceasta zona. Metoda este
$().hoversi primeste doua functii ascultator, prima care se executa cand mouse-ul intra in zona elementului, a doua cand mouse-ul iese. Probabil o buna analogie ar fi cea cu pseudo-selectorul CSS:hover, numai ca in CSS nu putem cu ajutorul acestuia decat sa manipulam proprietatile CSS, si acestea numai pentru elementul insusi si elementele din interiorul sau (selectorii CSS nu permit selectia stramosilor). - cazul in care vrem sa executam o serie de evenimente la click, de fiecare data altul, si care se executa circular. Metoda este
$().toggle, care primeste un numar arbitrar de functii ascultator, dar minim doua; acetea se vor declansa la click (nu exista astfel de scurtaturi pentru alt tip de evenimente)
Pe langa acest mod de a adauga evenimente de tip/tipuri generice, exista scurtaturi pentru toate tipurile comune de evenimente. Astfel, in loc sa adaugam un ascultator la click prin $().bind('click', function() {});, putem adauga astfel: $().click(function(event) { /* ... */ });. De asemenea, pentru a declansa un eveniment, se apeleaza astfel de scurtaturi fara parametri: $().keyup();. Atentie insa, nu toate tipurile de evenimente pot fi declansate. O lista completa cu aceste scurtaturi gasiti in documentatia oficiala.
Daca mai tineti minte, atunci cand am vorbit de evenimente in MooTools, am amintit ca exista un tip de eveniment custom – domready – care permitea executarea codului JS mult mai devreme decat daca am fi folosit load. Si jQuery are un astfel de tip custom, cu numele ready. Pentru a atasa ascultator la ready, putem folosi $().ready care primeste ca parametru functia care se va executa cand DOM-ul va fi gata. O scurtatura si mai comoda este transmiterea functiei $/jQuery, direct a functiei ascultator:
$(document).ready(function() { /* ... */ });
este echivalent cu
$(function() { /* ... */ });
Doar ca a doua bucata de cod este (un pic) mai scurta.
Data viitoare, vorbim despre AJAX in jQuery.
The Framework-uri JavaScript: Evenimente in jQuery by Interfeţe Web, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Share Alike 3.0 Romania License.
