Gestionarea evenimentelor în JavaScript

Până acum, programele JS afișate pornesc automat când pagina HTML este încărcată. Acest lucru a păstrat totul mic, simplu și direct.

Acum dorim să introducem mecanismul de pornire intenționată a unui program în anumite momente de timp. Când un utilizator introduce un anumit conținut, poate fi necesar să îl evalueze; atunci când un utilizator dă clic pe un buton, poate fi necesar să pornească o acțiune complexă, cum ar fi o interogare la baza de date. Acțiunile (validare, interogare DB) vor fi gestionate într-o funcție JS, iar un anumit cod HTML va iniția apelul la astfel de funcții JS. Pentru a înțelege cum funcționează, trebuie să învățăm despre evenimente. Într-un capitol ulterior, vom explica evenimentele în detaliu.

Să presupunem că un utilizator dă clic pe un buton. Acest lucru generează un eveniment onclick . Apariția unui astfel de eveniment este combinată declarativ cu un apel la o funcție JS numită. Browserul apelează această funcție JS. Funcția JS rulează.

HTML complet cu JS-ul încorporat citește:

<!DOCTYPE html>
<html>
<head>
  <title>Testing an event</title>
  <script>
  function showSomething() {
    alert("Someone clicked the button.");
  }
  </script>
</head>
<body>
  <h1>Click the button</h1>
  <button type="button" onclick="showSomething()">A button</button>
</body>
</html>

Spre deosebire de exemplele anterioare, nu se întâmplă nimic când pagina este încărcată. Acest lucru rezultă din faptul că comanda alert() este încorporată în funcția JS showSomething(). Această funcție este doar definită, dar nu este pornită.
Elementul HTML <button> are un atribut onclick cu o valoare showSomething().
Când se face clic pe buton, are loc un eveniment onclick. Evenimentul este legat de buton.
Browserul se ocupă de eveniment. El observă că va rula o funcție cu numele dat.
Browserul caută funcția în toate scripturile JS disponibile (vă rugăm să observați că acest nume, precum și tot codul JS, țin cont de majuscule și minuscule!).
După ce a găsit funcția cu exact acest nume în partea <script>...</script>, browserul pornește funcția.
Funcția se execută și afișează mesajul.

În esență, funcția JS cu comportamentul său de afișare a mesajelor va rula ori de câte ori utilizatorul face clic pe buton.

Al doilea exemplu

Acest exemplu oferă posibilitatea de a schimba culoarea de fundal a unor elemente HTML. Folosește 3 butoane, 2 funcții JS și 1 tip de eveniment (onclick; există multe alte tipuri). În plus, introduce conceptul de element id

<!DOCTYPE html>
<html>
<head>
  <title>Second test for events</title>
  <script>
  function makeGreen() {
    document.getElementById("mainPart")
            .style.background = "green";
  }
  function makeBlue() {
    document.getElementById("mainPart")
            .style.background = "blue";
    document.getElementById("blueButton")
            .style.background = "aqua";
  }
  </script>
</head>
<body id="mainPart">
  <h1>Click the buttons</h1>
  <button type="button" onclick="makeGreen()">GREEN</button>
  <button type="button" onclick="makeBlue()"
          id="blueButton">BLUE</button>
  <button type="button">Nothing</button>
</body>
</html>

Care sunt diferențele față de primul exemplu?

Sunt 3 butoane. Primele două sunt asociate cu o funcție JS; al treilea nu este asociat.
Elementele <body> și al doilea <button> conțin un atribut iid=„…”. Acest lucru le atribuie un identificator. El poate fi folosit în JS pentru a le localiza.
Elementul <script> conține două funcții cu nume diferite.
Când faceți clic pe unul dintre butoane, este apelată funcția JS asociată. Deoarece al treilea buton nu are o funcție JS asociată, nu se întâmplă nimic acolo.
În JS, partea de cod document.getElementById("...") localizează elementul cu acest ID. Partea de cod .style.background = "..." modifică culoarea de fundal a acestui element. Vă rugăm să ignorați că cele două părți sunt scrise în rânduri separate. Acest lucru este doar pentru o citire mai bună a codului sursă pe dispozitive mici. Puteți lega cele două linii împreună.
Funcția makeBlue() execută două instrucțiuni și schimbă culoarea de fundal a corpului și a lui însuși.