Kurs języka HTML i CSS

Poradnik webmastera

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

Zdarzenia

Email Drukuj PDF

Z JavaScriptem i DHTML-em nieodłącznie związane jest pojęcie zdarzeń. Z pewnością jest ono rozumiane intuicyjnie. Zdarzenie to przesunięcie kursora myszy, kliknięcie, wczytanie strony, opuszczenie strony itp. Każdy element strony ma przypisany zestaw obsługiwanych przez niego zdarzeń, a każdemu z nich można przypisywać własne procedury obsługi, napisane — jakżeby inaczej — w JavaScripcie.

W różnych przeglądarkach stosowane są różne modele obsługi zdarzeń. Zajmiemy się zatem modelem podstawowym, historycznie najstarszym, obsługiwanym podobnie przez wszystkie dostępne produkty. Oprócz modelu podstawowego istnieje jeszcze nowocześniejszy, ustandaryzowany model DOM (w kolejnych wersjach: level 1, level 2 i level 3), a także model specyficzny dla przeglądarek z rodziny Internet Explorer. Model podstawowy, na którym się skupimy, nazywany jest też czasem modelem DOM level 0.

Procedurę obsługi można przypisać do danego zdarzenia na dwa sposoby. Jeśli jest ona bardzo krótka, np. składa się tylko z jednej, dwóch instrukcji, i może być zapisana w jednej linii kodu, można ją przypisać bezpośrednio do znacznika obsługującego dane zdarzenie:

<znacznik zdarzenie="instrukcja;">

W przypadku dłuższych procedur obsługi zdarzeniu należy przypisać jedynie wywołanie funkcji JavaScript:

<znacznik zdarzenie="nazwa_funkcji();">

natomiast w kodzie strony (z reguły w sekcji head) umieścić samą funkcję. Całość miałaby zatem schematyczną postać:

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

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

<html>

<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 nazwa_funkcji()

  {

    //tutaj kod funkcji

  }

  </script>

</head>

<body>

  <znacznik zdarzenie="nazwa_funkcji();">

</body>

</html>

Przykładowy znacznik obsługujący zdarzenie miałby postać:

<p onclick="pClicked();">

Należy zwrócić uwagę, że najczęściej stosuje się uproszczoną terminologię. W przedstawionym przypadku powiedzielibyśmy, że zdarzeniu onclick została przypisana procedura obsługi w postaci funkcji pClicked. Formalnie rzecz ujmując, jest nieco inaczej (zdarzenie to click, onclick to właściwość wskazująca procedurę obsługi bądź wręcz procedura obsługi), ale z reguły posługujemy się formami uproszczonymi. Tak też będzie w dalszej części kursu.

Lista typowych zdarzeń została przedstawiona w tabeli 5.1.

Tabela 5.1. Lista typowych zdarzeń

Nazwa zdarzenia

Opis

Elementy HTML obsługujące zdarzenie

onabort

Zdarzenie, które powstaje, kiedy zostanie przerwane ładowanie obrazu.

img

onblur

Zdarzenie, które powstaje, kiedy element traci fokus.

większość elementów strony

onchange

Zdarzenie, które powstaje, kiedy element traci fokus i jednocześnie zmienia się wartość zawarta w tym elemencie (np. polu tekstowym).

input, select, textarea

onclick

Zdarzenie, które powstaje, kiedy element został kliknięty.

większość elementów strony

ondblclick

Zdarzenie, które powstaje, kiedy element został dwukrotnie kliknięty.

większość elementów strony

onerror

Zdarzenie, które powstaje, kiedy w trakcie ładowanie obrazu wystąpi błąd.

img

onfocus

Zdarzenie, które powstaje, kiedy element otrzymuje fokus.

większość elementów strony

onkeydown

Zdarzenie, które powstaje, kiedy naciśnięty zostanie klawisz klawiatury.

większość elementów strony

onkeypress

Zdarzenie, które powstaje, kiedy klawisz klawiatury zostanie naciśnięty i puszczony.

większość elementów strony

onkeyup

Zdarzenie, które powstaje, kiedy klawisz klawiatury zostanie puszczony.

większość elementów strony

onload

Zdarzenie, które powstaje, kiedy przeglądarka zakończy ładowanie strony lub ramki.

body, frameset

onmousedown

Zdarzenie, które powstaje, kiedy klawisz myszy zostanie naciśnięty nad elementem.

większość elementów strony

onmousemove

Zdarzenie, które powstaje, kiedy kursor myszy jest przesuwany nad elementem.

większość elementów strony

onmouseout

Zdarzenie, które powstaje, kiedy kursor myszy opuści obszar elementu.

większość elementów strony

onmouseover

Zdarzenie, które powstaje, kiedy kursor myszy wejdzie w obszar elementu.

większość elementów strony

onmouseup

Zdarzenie, które powstaje, kiedy klawisz myszy zostanie zwolniony nad elementem.

większość elementów strony

onreset

Zdarzenie, które powstaje podczas resetowania (wywołanie w kodzie metody reset, kliknięcie przycisku reset) formularza.

form

onresize

Zdarzenie, które powstaje, gdy zmieni się rozmiar okna.

body, frameset

onselect

Zdarzenie, które powstaje podczas zaznaczania fragmentu tekstu.

input (text, textarea)

onsubmit

Zdarzenie, które powstaje podczas wysyłania (wywołanie w kodzie metody submit, kliknięcie przycisku submit) formularza.

form

onunload

Zdarzenie, które powstaje, kiedy przeglądarka usuwa bieżący dokument.

body, frameset

 

Nowości Helionu

Statystyki

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