Przypinanie obsługi zdarzeń do elementów w JavaScript

Nauczmy się teraz sprawiać, by nasze elementy DOM reagowały na działania użytkownika strony. Na przykład, użytkownik kliknie gdzieś myszką, a nasz kod w odpowiedzi powinien przetworzyć to kliknięcie i wyświetlić na ekranie jakąś informację.

Działania użytkownika, które możemy śledzić za pomocą JavaScript, nazywane są zdarzeniami. Zdarzenia mogą być następujące: kliknięcie myszką w element strony, najechanie myszką na element strony lub odwrotnie - opuszczenie kursora myszy z elementu i tak dalej. Ponadto, istnieją zdarzenia niezależne od działań użytkownika, na przykład, zdarzenie związane z załadowaniem strony HTML do przeglądarki.

Dla przykładu zróbmy przycisk, po kliknięciu którego na ekran wyświetli się jakiś tekst. Na początek zróbmy kod HTML przycisku:

html<input id="button" type="submit">

Pobierzmy teraz referencję do przycisku do zmiennej:

javascriptlet button = document.querySelector('#button');

Teraz musimy określić reakcję naszego przycisku na kliknięcie w niego. Do tego w JavaScript istnieje specjalna metoda addEventListener, pierwszy parametr przyjmujący nazwę zdarzenia (kliknięcie na przycisk ma nazwę 'click'), a drugim parametrem - funkcję zwrotną (callback), wykonującą się przy wystąpieniu tego zdarzenia.

Zróbmy tak, aby na przykład po kliknięciu w przycisk wyświetlił się jakiś tekst:

javascriptbutton.addEventListener('click', function() {
  console.log('!!!');
});

html<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">