Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Dynamiczne przypisywanie procedur obsługi

Email Drukuj PDF

W dotychczasowych przykładach przypisywanie zdarzeniom procedur odbywało się statycznie, to znaczy powiązania dokonywane były w kodzie (X)HTML i nie zmieniały się w trakcie działania witryny. Jeśli zatem jakiś element strony był definiowany w ogólnej postaci:

<znacznik zdarzenie="procedura_obsługi();">

to procedura_obsługi była funkcją JavaScript zajmującą się obsługą zdarzenia, która nie zmieniała się w trakcie działania strony.

Nic jednak nie stoi na przeszkodzie, aby wiązanie zdarzenia z jego procedurą obsługi odbywało się dynamicznie. Elementy (X)HTML mają bowiem właściwości o nazwach zgodnych z nazwami zdarzeń, które pozwalają na dokonanie takiego przypisania. Jeśli zatem np. za pomocą metody getElementById uzyskamy odwołanie do jakiegoś elementu witryny i zapiszemy je w zmiennej obj:

var obj = document.getElementById("id_elementu");

to procedurę obsługi zdarzenia przypiszemy przy użyciu instrukcji:

obj.zdarzenie = procedura_obsługi();

W przypadku zdarzenia onclick będzie to wyglądało tak:

obj.onclick = procedura_obsługi();

Wykonajmy ilustrujący to przykład. Umieścimy na stronie dwie warstwy. Pierwszej statycznie, w kodzie (X)HTML, przypiszemy procedurę obsługi zdarzenia onclick. Druga początkowo nie będzie obsługiwała żadnych zdarzeń. Dopiero kliknięcie pierwszej warstwy spowoduje przypisanie procedury obsługi zdarzeniu onclick drugiej warstwy. Wtedy też zacznie ona reagować na kliknięcia.

W opisany sposób działa przykład zaprezentowany na listingu 5.9.

Listing 5.9. Dynamiczne przypisywanie procedur obsługi zdarzeń

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function div2Click()

    {

      alert('Druga warstwa została kliknięta.');

    }

    function div1Click()

    {

      var div2 = document.getElementById('div2');

      if(!div2.onclick){

        div2.onclick = div2Click;

        alert('Druga warstwa będzie reagowała na kliknięcia.');

      }

      else{

        alert('Uaktywnienie drugiej warstwy zostało już wykonane.');

      }

    }

    </script>

  </head>

  <body>

    <div id="div1"

         style="background-color:#e0e0e0;width:200px;height:80px;

                text-align:center;"

         onclick="div1Click();"

    >

    To jest pierwsza warstwa. Kliknij ją, by przypisać procedurę

    onclick drugiej warstwie.

    </div>

    <div id="div2"

         style="background-color:#d0d0d0;width:200px;height:80px;

                text-align:center;"

    >

    To jest druga warstwa.

    </div>

  </body>

</html>

W sekcji <body> znajdują się dwie umieszczone jedna pod drugą warstwy. Mają przypisane style pozwalające wyróżnić je na ekranie oraz identyfikatory div1 i div2. Każda zawiera również przykładowy tekst. Pierwszej warstwie (div1) została przypisana procedura obsługi zdarzenia onclick w postaci funkcji div1Click — będzie więc reagowała na kliknięcia. Drugiej warstwie (div2) takiej procedury nie przypisano, zatem kliknięcie jej tuż po wczytaniu kodu (X)HTML do przeglądarki nie spowoduje żadnej reakcji.

Zadaniem funkcji div1Click jest zatem przypisanie procedury obsługi zdarzeniu onclick warstwy div2, tak by zaczęła ona reagować na kliknięcia. Najpierw za pomocą metody getElementById jest więc pobierane (i zapisywane w zmiennej div2) odwołanie do warstwy div2. Następnie badane jest, czy istnieje procedura obsługi zdarzenia onclick warstwy div2). Odpowiada za to instrukcja warunkowa:

if(!div2.onclick){

Wykorzystujemy tu fakt, że jeśli nie ma procedury obsługi zdarzenia onclick danego elementu witryny (w tym przypadku warstwy), to właściwość onclick będzie interpretowana jako wartość undefined (Firefox) lub zawierała będzie wartość null (Internet Explorer, Opera). Ponieważ zarówno undefined, jak i null są ewaluowane do wartości false, może zostać zastosowany powyższy warunek.

Jeżeli warstwa div2 nie ma zdefiniowanej procedury obsługi zdarzenia onclick, właściwości onclick obiektu div2 jest przypisywana nazwa funkcji div2Click (ściślej rzecz ujmując, jest to de facto obiekt, wskazanie do obiektu, funkcji). Za pomocą funkcji alert wyświetlany jest też komunikat informujący, że warstwa będzie reagowała na kliknięcia. Jeśli natomiast warstwa div2 ma już przypisaną procedurę obsługi zdarzenia onclick (czyli wyrażenie div2.onclick da w wyniku wartość true), jedyną wykonywaną czynnością jest wyświetlenie komunikatu informującego o tym, że uaktywnienie drugiej warstwy zostało już wykonane.

Tym samym po wczytaniu strony do przeglądarki:

  • Jeśli nie została kliknięta warstwa div1, kliknięcie warstwy div2 nie będzie dawało żadnego efektu.

  • Jeśli została kliknięta warstwa div1, kliknięcie warstwy div2 będzie powodowało wyświetlenie komunikatu Druga warstwa została kliknięta.

  • Pierwsze kliknięcie warstwy div1 spowoduje uaktywnienie warstwy div2 i wyświetlenie komunikatu Druga warstwa będzie reagowała na kliknięcia.

  • Kolejne kliknięcia warstwy div1 będą powodowały jedynie wyświetlenie komunikatu Uaktywnienie drugiej warstwy zostało już wykonane.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15276560