Tutorial MooTools pasul 5 Evenimente

La fel ca selectorii,evenimentele reprezinta o parte importanta a crearii unei interfete cu utilizatorii interactiva. Practic, la fiecare element trebuie decis ce actiune cauzeaza ce efect. In continuare vom vorbi despre cateva din cele mai folosite evenimente:

  • Cel mai comun evenment in dezvoltarea web este click-ul stanga al mouse-ului (single left click). Hyperlink-urile recunosc evenimentul "click" si trec utilizatorul catre un alt URL. MooTools poate recunoaste acest eveniment in cadrul altor elemente ale DOM-ului, oferind astfel multa flexibilitate atat in design cat si ca functionalitate. Primul pas este reprezentat de adaugarea unui eveniment "click" unui element:
    		//$('nume_id') defineste elementul
    //.addEvent adauga evenimentul
    //('click') defineste tipul de eveniment
    $('nume_id').addEvent('click', function(){
        //treceti tot ce doriti sa se intample "onclick" aici
        alert('acest element recunoaste evenimentul click');
    });
    
    Puteti obtine acelasi lucru separand functia de .addEvent();
    		var functia_click = function(){
        //treceti tot ce doriti sa se intample aici
        alert('acest element recunoaste evenimentul click');
    }
    window.addEvent('domready', function() {
        $('nume_id').addEvent('click', functia_click);
    });
    
    La fel ca la evenimentul click recunoscut de hyperlink-uri, evenimentul click MooTools de fapt recunoaste momentul eliberarii de catre utilizator al butonului mouse-ului, si nu cel al apasarii, pentru a permite acestora posibilitatea de a se razgandi, luand cursorul de pe element inainte de a elibera butonul mouse-ului.
  • Hyperlink-uile recunosc de asemenea si evenimentul "hover", cand cursorul este deasupra elementului ancora. MooTools poate recunoaste acest eveniment in cadrul altor elemente. Prin separarea acestui eveniment in "mouseenter"(momentul in care cursorul mouseului intra in zona de actiune a elementului) si "mouseleave"(momentul in care cursorul mouseului iese din zona de actiune a elementului), puteti obtine un control mai mare in manipularea DOM-ului asupra actiunii utilizatorilor:
    		var functie_mouse_intrare = function(){
        //treceti tot ce doriti sa se intample aici
        alert('acest element recunoaste evenimentul mouse enter');
    }
     window.addEvent('domready', function() {
        $('nume_id').addEvent('mouseenter', functie_mouse_intrare);
    });
    
    
    Mouseleave functioneaza in acelasi mod. Acest eveniment se declanseaza cand cursorul paraseste elementul respectiv:
    		var functie_mouse_iesire = function(){
       //treceti tot ce doriti sa se intample aici
        alert('acest element recunoaste evenimentul mouse leave');
    }
     window.addEvent('domready', function() {
       $('nume_id').addEvent('mouseleave', functie_mouse_iesire);
    });
    

Exista momente in care veti dori sa indepartati un eveniment de la un element, cand acesta nu va mai fi necesar. Stergerea unui eveniment este la fel de usor de facut ca si adaugarea unuia, si chiar urmeaza o structura similara:

//functioneaza la fel ca exemplele anterioare, doar inlocuiti .addEvent cu .removeEvent
$('nume_id').removeEvent('mouseleave', functie_mouse_iesire);

MooTools recunoaste de asemenea intrarile de la tastatura (keystrokes) la elemente de tip "textarea" sau "input". Sintaxa pentru acest lucru, o puteti vedea in continuare:

var functie_tastatura = function () {
    alert('Aceasta textarea poate acum recunoaste evenimente keystroke');
};
 window.addEvent('domready', function() {
    $('textareaMea').addEvent('keydown', functie_tastatura);
});

Codul de mai sus va recunoaste orice intrare de la tastatura. Pentru o anumita intrare, trebuie sa adaugam un parametru si sa folosim o declaratie IF:

//observati paramatrul "event" intre parantezele functiei
var functie_tastatura = function(event){
    // aceasta spune "daca tasta apasata este "k," efectueaza urmatoarele."
    if (event.key == "k") {  
	    alert("Tocmai ati apasat litera K") 
    };
}
window.addEvent('domready', function() {
    $('textareaMea').addEvent('keydown', functie_tastatura);
});

Pentru taste speciale, precum shift sau control, sintaxa este putin diferita:

var functie_tastatura = function(event){
    // aceasta spune, "daca tasta apasata este "shift," efectueaza urmatoarele."
    if (event.shift) { 
	    alert("Ai apasat shift.") 
    };
} 
window.addEvent('domready', function() {
    $('textareaMea').addEvent('keydown', functie_tastatura);
});

Codul HTML este urmatorul:

Pentru mai multe detalii, cititi tutorialele de pe site-ul MooTools.

Alex B.

0Comentarii la "Tutorial MooTools pasul 5 Evenimente"

Adauga Comentariu

Mesaj

Trimite