Dziudek's jogger

Gdy już dodamy do naszej strony różne efekty, na przykład bazujące na bibliotece moo.fx to nagle zauważymy, że nasz kod jest bardzo bogaty we wszelkiego rodzaju zdarzenia "onclick", "onmouseover", "onload" itd. Im więcej efektów, tym więcej tego rodzaju zdarzeń. Powiedzmy sobie szczerze - chyba każdy by chciał aby można było trzymać kod JavaScript całkowicie oddzielony od kodu (X)HTML swojej strony ? I tu z pomocą przyjdzie nam klasa Behaviour , który pozwoli nam na dołączanie zdarzeń do elementów bez ingerowania w kod dokumentu :) Pozwolę sobie krótko wyjaśnić jak to cudo (a właściwie cudeńko bo waży zaledwie 7.95kB, a po skompresowaniu nawet niecałe 3-4 kB) działa ;)

Jak to działa ?

Aby skorzystać z możliwości klasy Behaviour musimy jedynie dołączyć plik z tą klasą oraz plik z własnym kodem JavaScript do naszego dokumentu. Następnie w pliku z naszym kodem dla dokumentu należy stworzyć odwołania do poszczególnych elementów i przypisać im zdarzenia. Potem już tylko wykorzystujemy funkcję rejestrującą klasy Behaviour i... już :) W praktyce wygląda to następująco :

var moje_zdarzenia = {
    'selektor CSS' : function(element){
        element.zdarzenie = function(){
            // kod wykonywany w wypadku // wystąpienia zdarzenia
        }
    }
};

Behaviour.register(moje_zdarzenia);

Gdzie "selektor CSS" to odwołanie się do danego elementu lub grupy elementów - przykłady poniżej:

• div - spowoduje przypisanie zdarzenia do wszystkich elementów div
• #id - spowoduje przypisanie zdarzenia do elementu o identyfikatorze "id"
• div.klasa - spowoduje przypisanie zdarzenia do elementów div mających atrybut class="klasa"
• #id strong - spowoduje przypisanie zdarzenia do elementów strong znajdujących się w elemencie o identyfikatorze "id"

i tak dalej... Mamy więc swobodny dostęp do wszystkich elementów naszej strony ;)

Mały przykład:

var moje_zdarzenia = {
    'b' : function(element){
        element.onclick = function(){
            this.innerHTML = "To jest pogrubienie...";
        }
    }
};

Behaviour.register(moje_zdarzenia);

Powyższy kod sprawi, że po kliknięciu na dowolny pogrubiony tekst zamieni się on na tekst "To jest pogrubienie".

Teraz sprawmy by po kliknięciu na pochylony tekst również pojawiał się odpowiedni tekst:

var moje_zdarzenia = {
    'b' : function(element){
        element.onclick = function(){
            this.innerHTML = "To jest pogrubienie...";
        }
    },
    'i' : function(element){
        element.onclick = function(){
            this.innerHTML = "To jest kursywa...";
        }
    }
};

Behaviour.register(moje_zdarzenia);

I tu mała uwaga ode mnie - nie zapominajmy o przecinku zamykającym klamrę od funkcji operującej na elemencie -oczywiście stawiamy go tylko wtedy gdy po danym elemencie, chcemy dodać jeszcze jeden ;) To ważne ponieważ taki brak przecinka nic nie spowoduje w Firefoxie, ale w Internet Explorerze spowoduje błąd i może uniemożliwić dalsze działanie skryptów (Jestem na ten błąd uczulony ponieważ kiedyś zapomniałem przecinka w takim właśnie miejscu przy pisaniu skryptu wykorzystującego inną bibliotekę - advAJAX i straciłem dużo czasu by znaleźć błąd - komunikaty o błędach były bardzo mylące ;) , dlatego uczulam na te przecinki ;) ).

Gdybyśmy chcieli aby elementy b miały więcej niż jedno zdarzenie to dodajemy je w funkcji dotyczącej danego elementu:

var moje_zdarzenia = {
    'b' : function(element){
        element.onclick = function(){
            alert(this.innerHTML);
        },
        element.onmouseover = function(){
            this.innerHTML = "To jest pogrubienie...";
        }
    },
    'i' : function(element){
        element.onclick = function(){
            this.innerHTML = "To jest kursywa...";
        }
    }
};

Behaviour.register(moje_zdarzenia);

Oczywiście pamiętamy o przecinkach ;)

Prawda, że proste ?

Właściwie pozostaje jeszcze jedna kwestia - nasza strona od razu nie musi zawierać wszystkich elementów do których przypisaliśmy zdarzenia. Gdybyśmy przypisali zdarzenie elementowi, którego jeszcze nie ma, to nie zostanie tak naprawdę ono przypisane, ponieważ tego elementu jeszcze w drzewie dokumentu nie ma. Ale tutaj z pomocą przychodzi nam funkcja apply(), która może aktualizować dane o drzewie dokumentu:

var moje_zdarzenia = {
    'a.link' : function(element){
        element.onclick = function(){
            alert(this.innerHTML);
        }
    }
};

Behaviour.register(moje_zdarzenia);

function dodaj_element() {
    document.getElementById('jakis_element').innerHTML = '<a class="link" href="#">Jakiś link</a>';

Behaviour.apply();
}


W tym wypadku link powiązany z klasą "link" pojawi się dopiero przy wywołaniu funkcji dodaj_element(), a co za tym idzie zmieni strukturę drzewa dokumentu, ale mimo że przewidzieliśmy jego istnienie ustalając zdarzenia dla elementów, to dopiero po wywołaniu Behaviour.apply() nasze zdarzenie dla tego elementu będzie dostępne.

Myślę, że tym krótkim opisem przybliżyłem niewtajemniczonym działanie tej według mnie prostej w obsłudze i bardzo użytecznej klasy :)