Kurs języka HTML i CSS

Poradnik webmastera

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

Zdarzenia onLoad i onUnload

Email Drukuj PDF

Jak obsługa zdarzeń będzie wyglądała w praktyce? Załóżmy, że podczas ładowania strony do przeglądarki ma być wyświetlone okno dialogowe. Należy zatem użyć zdarzenia onload przypisanego znacznikowi body. Ponieważ do wyświetlenia okna dialogowego służy metoda alert, wywołująca je instrukcja zmieści się swobodnie w jednej linii; znacznik body przyjmie więc postać:

<body onload="alert('Przykładowy tekst');">

a cały kod postać widoczną na listingu 5.1.

Listing 5.1. Użycie zdarzenia onload

<!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>

  </head>

  <body onload="alert('Przykładowy tekst');">

    <p>Ta strona obsługuje zdarzenia</p>

  </body>

</html>

Gdyby zastosować drugi sposób obsługi zdarzeń, czyli w znaczniku umieścić tylko funkcję obsługującą zdarzenie, a właściwy kod (czyli w tym przypadku wywołanie alert) dopiero w tej funkcji, całość wyglądałaby w sposób przedstawiony na listingu 5.2.

Listing 5.2. Osobna funkcja obsługująca zdarzenie

<!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 onloadHandler()

    {

      alert('Przykładowy tekst');

    }

    </script>

  </head>

  <body onload="onloadHandler();">

    <p>Ta strona również obsługuje zdarzenia</p>

  </body>

</html>

Efekt działania tego kodu będzie taki sam jak w przypadku poprzedniego przykładu. Różnica dotyczy wyłącznie sposobu obsługi zdarzenia. Tym razem w odpowiedzi na zdarzenie wywoływana jest funkcja o nazwie onloadHandler, czyli zdarzeniu onload została przypisana procedura obsługi w postaci tej funkcji:

<body onload="onLoadHandler();">

Definicja funkcji znajduje się w skrypcie umieszczonym w sekcji <head>. Jedynym zadaniem wykonywanym przez onloadHandler jest wywołanie metody alert powodującej wyświetlenie okna dialogowego.

Zdarzeniem analogicznym do onload jest onunload, które jest wykonywane podczas opuszczania strony przez użytkownika. A zatem, gdyby w trakcie tej czynności miało się pojawić okno dialogowe, należałoby zastosować znacznik body w postaci:

<body onload="alert('Przykładowy tekst');">

lub (przy założeniu, że wcześniej została zdefiniowana funkcja o nazwie onunloadHandler):

<body onload="onUnloadHandler();">

Należy przy tym wspomnieć, że zdarzenia są obsługiwane niezależnie. Więc gdyby okno dialogowe miało się ukazywać zarówno podczas ładowania, jak i opuszczania witryny, należy użyć instrukcji:

<body onload="alert('tekst1');" onunload="alert('tekst2');">

lub też:

<body onload="onloadHandler();" onload="onunloadHandler();">

Przykład strony reagującej zarówno przy jej otwieraniu, jak i opuszczaniu będzie wyglądał tak, jak przedstawiono to na listingu 5.3.

Listing 5.3. Obsługa zdarzeń onload i onunload

<!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 onloadHandler()

    {

      alert('Strona jest otwierana');

    }

    function onunloadHandler()

    {

      alert('Strona jest opuszczana');

    }

    </script>

  </head>

  <body onload="onloadHandler();"

        onunload="onunloadHandler();">

    <p>Ta strona również obsługuje zdarzenia</p>

  </body>

</html>

 

Nowości Helionu

Statystyki

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