Pełnoprawny, skryptowy język programowania JavaScript umożliwia przeglądarce internetowej podejmowanie decyzji lub inicjowanie działań w zależności od akcji podjętych przez użytkownika w interfejsie witryny.

Taką akcję użytkownika zarejestrowaną przez przeglądarkę określamy w programowaniu jako zdarzenie (ang. event). Zadaniem programisty webowego jest więc przygotowanie obsługi wybranych zdarzeń, czyli w praktyce stworzenie własnego kodu źródłowego, zazwyczaj w postaci funkcji.

Funkcja to w programowaniu fragment kodu realizujący konkretne zadanie. Idealnie więc zgrywa się to ze zdarzeniami zachodzącymi w interfejsie strony – do zajścia wybranego zdarzenia można przecież wygodnie przypisać wywołanie własnej funkcji. Tak właśnie powstaje obsługa zdarzenia zdefiniowana przez programistę.

Czym dokładnie jest zdarzenie?

W praktyce zdarzenia w przeglądarce nie zawsze stanowią jedynie reakcję na akcję internauty. Owszem, najczęściej obsługiwane przez programistę sytuacje rzeczywiście zainicjowane będą bezpośrednimi działaniami użytkownika - na przykład kliknięciem, wskazaniem za pomocą kursora, wciśnięciem klawisza na klawiaturze itd.

Lecz oprócz tego typu bezpośrednich reakcji istnieją także zdarzenia zachodzące wskutek mechaniki działania samej witryny - przykładem jest tu zdarzenie load, które zachodzi w momencie wczytania np. obrazka, pliku lub nawet całej podstrony. Jaka jest więc pełna i możliwie dokładna definicja zdarzenia?

Gdy się nad tym zastanowić, wspomniane nasłuchiwanie zdarzeń nie jest wcale niczym nowym ani zaskakującym w systemach komputerowych. W końcu na tej samej zasadzie działa np. obsługa ikon pulpitu czy paska zadań w systemie Windows albo ekran główny w telefonie z systemem Android.

Choć brzmi to dość niepokojąco, wiele programowalnych urządzeń komputerowych nieustannie śledzi nasze poczynania. Oczywiście dokonuje tego jedynie na ściśle określonych i transparentnych zasadach związanych z udostępnionymi użytkownikowi elementami interfejsu.

Lecz co do zasady, zadaniem dobrze napisanej aplikacji (w tym również aplikacji webowej) jest jak najszybciej reagować na zaistniałe zdarzenia. To właśnie tak pożądana przez użytkowników interaktywność aplikacji, systemu czy urządzenia. Dlatego również przeglądarka internetowa została stworzona według tej samej idei jak najszybszego obsługiwania zdarzeń.

Rodzaje zdarzeń w przeglądarce

Dokonajmy teraz przeglądu popularnych zdarzeń, czyli takich, których obsługę często definiują programiści JavaScript – dla zwiększenia czytelności listy, zdarzenia podzielono na kilka kategorii:

Zdarzenia związane z kursorem myszy

Zdarzenia związane z klawiaturą

Zdarzenia w interfejsie witryny

Zdarzenia związane z formularzami

Jak widać, do naszej dyspozycji oddano wiele różnorodnych zdarzeń, których obsługę możemy zdefiniować w języku JavaScript. Powyższa lista stanowi przegląd jedynie najpopularniejszych zdarzeń – w dokumentacji języka JS odnajdziemy ich jeszcze więcej!

Teraz możemy przejść do stworzenia obsługi sytuacji automatycznie rejestrowanych w interfejsie witryny. Dokonamy tego z użyciem własnych funkcji.

Własne funkcje obsługujące zdarzenia

W języku JavaScript zrealizowanie obsługi zdarzenia polega najczęściej na przypisaniu do automatycznej rejestracji tego zajścia w przeglądarce wywołania własnej funkcji.

Jak już wspomnieliśmy, funkcja to wydzielony fragment kodu spełniający konkretne zadanie. Pasuje to wręcz idealnie do stworzenia różnych reakcji elementów interfejsu w odpowiedzi na poczynania internauty czy zajścia w samej przeglądarce.

Istnieje klika metod zdefiniowania tego przypisania wywołania własnej funkcji do momentu zajścia zdarzenia (ang. trigger, - dosł. naciśnięcie spustu broni). Zacznijmy od metody klasycznej, choć nieoptymalnej.

Przypisanie z użyciem atrybutu HTML

Zrealizujmy przypisanie własnej funkcji do obsługi najpopularniejszego zdarzenia click. Załóżmy, że naszym celem jest wyświetlenie małego okienka dialogowego (ang. alert), za pomocą którego przywitamy się ze światem. Jednak ma to nastąpić nie przy wczytaniu strony do przeglądarki, lecz w momencie kliknięcia w przycisk z napisem Test.

Klasyczna metoda połączenia wykonania funkcji z obsługą zajścia zdarzenia, jakim jest kliknięcie przycisku, polega na zdefiniowaniu dla przycisku atrybutu HTML, który wywołanie funkcji ma ustawione jako swoją wartość.

Przycisk zdefiniowany w HTML:

<input type="button" value="Test" onclick="hello()">

Zwróćmy uwagę na obecność dodatkowego atrybutu HTML o nazwie onclick, którego wartość ustawiono na wywołanie funkcji o nazwie hello(). Ponieważ jest to wywołanie funkcji, zawiera nawiasy okrągłe.

Samą funkcję oczywiście zdefiniujemy już w skrypcie:

<script>

  function hello()
  {
    alert("Witaj Świecie!"); 
  } 
  
</script>

Ta klasyczna metoda jest bardzo prosta w zapisie. Reasumując: połączenie funkcji zapisanej w JavaScript z zajściem zdarzenia następuje dzięki zdefiniowaniu w HTML odpowiedniej wartości dodatkowego atrybutu.

Wadą tworzenia atrybutu HTML jest brak oddzielenia kodu JavaScript od źródła HTML, czyli zmieszanie warstwy zawartości strony (HTML) z front‑endowąfront‑endfront‑endową mechaniką działania witryny (JavaScript).

Znacznie lepszym wyjściem jest przypisanie wywołania własnej funkcji do obsługi zdarzenia również za pomocą kodu JavaScript, czyli bez konieczności użycia dodatkowych zapisów HTML. W tym celu trzeba użyć tzw. nasłuchiwacza zdarzeń.

Zdefiniowanie nasłuchiwacza w JavaScript

Naszym celem ponownie jest wyświetlenie małego okienka dialogowego, za pomocą którego przywitamy się ze światem po kliknięciu w przycisk z napisem Test.

Przycisk w HTML:

<input type="button" id="test" value="Test">

Tym razem jednak nie użyjemy atrybutu onclick, tylko metody addEventListener() wywołanej na rzecz obiektu, którym jest nasz przycisk. Aby móc uchwycić obiekt, do kontrolki formularza dodaliśmy klasyczny atrybut id="test".

Pora zatem na podpięcie wykonania naszej funkcji hello() w nasłuchiwaczu zdarzeń - tym razem zostanie to już zrealizowane za pomocą kodu JavaScript, a nie z użyciem atrybutu HTML:

<script>

  function hello()
  {
    alert("Witaj Świecie!"); 
  } 
  
  var przycisk = document.getElementById("test");
  przycisk.addEventListener("click", hello);
  
</script>

W tej metodzie lepiej oddzielono źródło JavaScript od języka opisowego HTML – nie mieszamy warstwy zawartości witryny oraz jej mechaniki. Przypisanie funkcji do zdarzenia nastąpiło przy użyciu instrukcji języka JavaScript, a nie dodatkowego atrybutu HTML.

Przeglądarka „nasłuchuje” zajścia zdarzenia i w momencie, gdy kliknięcie rzeczywiście następuje, wywołana zostaje do pracy funkcja o nazwie hello.

Referencja, funkcja anonimowa, funkcja strzałkowa

Oprócz przekazania funkcji do nasłuchiwacza poprzez referencję, można tego dokonać także na dwa inne sposoby – przyjrzyjmy się im bliżej.

Pierwszy sposób już znamy - wskazujemy przypisanie własnej funkcji do nasłuchiwacza poprzez referencję, czyli podając samą nazwę funkcji, bez obecności nawiasów:

<script>

  function hello()
  {
    alert("Witaj Świecie!"); 
  } 
  
  var przycisk = document.getElementById("test");
  
  //Przypisanie przez referencję do własnej funkcji
  przycisk.addEventListener("click", hello);

</script>

Możemy także skorzystać z tzw. funkcji strzałkowej, czyli takiej, która zawiera uproszczoną, krótszą składnię aniżeli klasyczne wyrażenie funkcji:

<script>

  var przycisk = document.getElementById("test");
  
  //Użycie funkcji strzałkowej zamiast funkcji hello()
  przycisk.addEventListener("click", () => {
    alert("Witaj Świecie!"); 
  });

</script>

Oprócz tego możemy także zdecydować się na funkcję anonimową, czyli zdefiniowaną klasycznie z użyciem klauzuli function, lecz bez podania nazwy funkcji:

<script>

  var przycisk = document.getElementById("test");
  
  //Użycie funkcji anonimowej (bez nazwy)
  przycisk.addEventListener("click", function() {
    alert("Witaj Świecie!"); 
  });

</script>

Zapisy skrócone wydają się atrakcyjne, co zatem zyskujemy, stosując referencję do własnej funkcji? Otóż wówczas możliwe staje się odpięcie wywołania funkcji od nasłuchiwacza zdarzeń:

<script>

  function hello()
  {
    alert("Witaj Świecie!"); 
    przycisk.removeEventListener("click", hello);
  } 
  
  var przycisk = document.getElementById("test");
  przycisk.addEventListener("click", hello);

</script>

Tym razem funkcja hello() po wyświetleniu okna dialogowego „odpina” swoje przypisanie do nasłuchiwacza zdarzenia kliknięcia przycisku – kolejne kliknięcia nie spowodują już pojawienia się okienka.

Jak zauważyliśmy, wywołanie metody removeEventListener() wymaga przesłania do niej dwóch argumentów - najpierw jest rodzaj zdarzenia, a później nazwa funkcji przypiętej do jego obsługi. To właśnie dlatego użycie funkcji anonimowych wyklucza użycie metody - nie dysponujemy przecież nazwą funkcji.

Kiedy zatem warto użyć zapisów skróconych? Logiczna odpowiedź nasuwa się sama - przede wszystkim tam, gdzie absolutnie nie zakładamy odpięcia wykonywanych instrukcji od nasłuchiwania zdarzenia.

Ponadto istnieje jeszcze kilka dodatkowych ograniczeń zaawansowanych, na przykład niemożność użycia w funkcjach strzałkowych słów kluczowych this oraz super, jak również brak dostępu do specjalnego obiektu dostępnego w funkcjach, który nosi nazwę arguments.

Warto także pamiętać, że funkcje strzałkowe nie są obsługiwane w przeglądarkach z rodziny Internet Explorer.

Słownik