Interfeţe Web

La fel se intampla si cu evenimentele. Element.addEvent si Element.removeEvent sunt aproape identice cu metodele native introduse de DOM2, Element.addEventListener si Element.removeEventListener – cu singura diferenta ca Element.addEvent nu primeste si al treilea parametru (cel care spunea daca evenimentul va fi captat in faza de bubbling sau in faza de capturing) – pentru ca IE nu suporta evenimente care sa fie captate in faza de capturing. Asadar, toata discutia pe care am purtat-o in articolul Evenimente in JavaScript legata de modelul DOM2 de adaugare a ascultatorilor la evenimente, ramane valabila (foarte important este de retinut din acel articol discutia despre Element.removeEventListener). Si mai important, aceste doua metode sunt implementate in asa fel ca merg si in IE, inclusiv parametrul de tip Event transmis functiei ascultator – care de data aceasta este extins incat nu mai exista nicio diferenta intre browsere (pentru mai multe detalii, consultati documentatia oficiala).

Vom numi de acum inainte obiectele JavaScript generice (de tip Object), hash-uri. Asa ca de fiecare data, de acum inainte, cand vom spune ca o functie primeste ca parametru un hash, acesta este un obiect care ar trebui privit ca vector asociativ. Cheile hash-ului sunt cheile din obiect, iar valorile hash-ului sunt valorile asociate cheilor. De exemplu:

var o = {
    foo: 'bar',
    baz: function() {
        alert('bat!');
    }
}

In acest caz o este un hash, cheile sunt 'foo' si 'baz', iar valorile sunt stringul 'bar' si functia anonima care corespunde lui baz.

Sa vedem ce aduce MooTools in plus fata de evenimentele DOM2. Este vorba de cateva metode folositoare cand vrem sa adaugam mai multe evenimente deodata:

• Element.addEvents primeste ca parametru un hash, in care cheile sunt tipuri de evenimente (de exemplu, 'click', 'keydown', etc.), iar valorile sunt ascultatori pentru acele evenimente.
• Element.removeEvents primeste un singur parametru, care este optional. Daca acesta lipseste, sunt stersi toti ascultatorii la toate evenimentele, care fusesera atasati pana a fost apelata metoda. Daca acest parametru este prezent, el poate fi de tip string, sau un hash. Daca este vorba de un string, acesta trebuie sa fie un tip de eveniment, iar efectul apelarii metodei este ca sunt stersi toti ascultatorii la evenimente de acel tip (de exemplu, daca parametrul ar fi fost 'click', ar fi fost stersi toti ascultatorii la click pentru acel element). Daca avem de-a face cu un hash, acesta trebuie sa contina perechi tip eveniment: functie, si rezultatul este ca pentru fiecare tip de eveniment, este sters doar ascultatorul care este valoarea cheii respective. De exemplu:

var e = $('element');
var ascultator = function (ev) {
    alert('Clicked!');
};
var ascultator2 = function(ev) {
    alert('Clicked 2!');
}
e.addEvent('click', ascultator);
e.addEvent('click', ascultator2);
// nu va functiona, trebuie ca ascultatorul sa fie acelasi
// vezi discutia de la Evenimente in JavaScript
e.removeEvents({
    'click': function(ev) {
        alert('Clicked 2!');
    }
});
// de aceasta data va functiona, pentru ca ascultatorul este acelasi
e.removeEvents({click: ascultator2});

Pentru a genera un eveniment (de exemplu vrem sa se intample toate actiunile asociate unui click pe un link, fara sa fi facut ecplicit click pe acel link), avem, la dispozitie metoda Element.fireEvent, care primeste 3 parametri (doar primul obligatoriu):

• primul parametru este un string si reprezinta tipul evenimentului. Vor fi apelati toti ascultatorii asociati acelui tip de eveniment, pentru acel element. De exemplu, considerand elementul e de mai sus si inainte sa fi sters din ascultatori:

e.fireEvent('click'); // alerteaza 'Clicked!' *si* 'Clicked 2!'

• al doilea parametru reprezinta parametrii care vor fi transmisi ascultatorilor. Daca vrem sa fie transmisi mai multi, acesta trebuie sa fie un vector. Ca urmare, daca vrem sa transmitem un singur parametru, de tip vector, acesta trebuie sa fie pus de unul singur intr-un alt vector.
• al treilea parametru este un intreg, si reprezinta numarul de secunde peste care va fi declansat evenimentul (implicit este 0 si evenimentul este declansat imediat).

Uneori este util sa copiem ascultatorii atasati unui element ca ascultatori ai unui alt element, si pentru aceasta avem la dispozitie metoda Element.cloneEvents, care primeste doi parametri: primul, obligatoriu, este elementul (sau un string ce reprezinta id-ul unui element) de la care vor fi copiati (clonati) ascultatorii, iar al doilea, optional, un string care spune care tip de ascultatori ar trebui copiati (daca lipseste, sunt copiati toti ascultatorii).

Pe langa tipurile de evenimente care sunt native in JavaScript, avem la dispozitie 3 tipuri de evenimente care sunt definite de MooTools si care pot fi de folos in anumite situatii:

• 'mouseenter' si 'mouseleave' sunt evenimente declansate atunci cand mouse-ul intra/iese din granitele unui element. Insa poate ne intrebam care este diferenta intre acestea si tipurile native 'mouseover' si 'mouseout'. Sa consideram ca avem un div si undeva in interiorul acestui div, un alt div, cu dimensiuni mai mici decat parintele sau. Cand mouse-ul intra pentru prima oara in interiorului div-ului mare, se declanseaza atat 'mouseover' cat si 'mouseenter'. Insa atunci cand mouse-ul intra in interiorul div-ului al doilea, daca am fi folosit 'mouseover'/'mouseout', s-ar declansa evenimentul 'mouseout' pentru div-ul mare, 'mouseover' pentru div-ul mic si inca un mouseover pentru div-ul mare. Daca insa folosim 'mouseenter', 'mouseleave', se declanseaza numai ‘mouseenter’ pentru div-ul mic. Singurul eveniment care s-ar mai putea declansa ar fi 'mouseleave', atunci cand mouse-ul iese din div-ul mare. Ca sa intelegeti mai bine, am pus sus doua demo-uri: mouseover si mouseenter. Puteti vedea in surse puse in practica cateva concepte simple dintre cele pe care le-am discutat in acest articol si in cele precedente.
• 'mousewheel' se declanseaza atunci cand este rotit wheel-ul mouse-ului.
• 'domready' – foarte util atunci cand se separa codul JavaScript de codul HTML (o buna practica de programare). Este oarecum asemanator cu un eveniment 'load', insa exista o diferenta importanta care face ca 'domready' sa fie recomandat: evenimentul load se declanseaza cand au fost incarcate toate elementele din pagina si toate imaginile. In schimb, 'domready' este declansat cand ierarhia DOM este gata (deci toate elementele pe care le-am putea modifica exista), insa nu asteapta ca imaginile sa si fie incarcate. Aceasta face ca domready sa se declanseze uneori de cateva ori mai repede decat load, mai ales daca avem de-a face cu imagini de dimensiuni mari.

Data viitoare vom vorbi despre AJAX in MooTools.

Link-uri utile:

• Documentatia oficiala MooTools pentru Element.Event
• Mootorial: Events
• Mootorial: Element.Events
• Mootorial: DomReady
• Goodbye mouseover, hello mouseenter