Introducere în procesarea evenimentelor
Pentru interacțiunea cu utilizatorul în JavaScript, este definit un mecanism de evenimente. De exemplu, când un utilizator apasă un buton, se generează un eveniment de apăsare a butonului.
Similar, când utilizatorul introduce text într-un câmp text, se generează un eveniment al acestui câmp text. În codul JavaScript, putem identifica apariția unui eveniment și îl putem procesa într-un anumit mod.
Pe scurt, mecanismul general arată astfel. Mai întâi are loc efectiv evenimentul, de exemplu, utilizatorul a apăsat pe un buton. Obiectul care a generat evenimentul este de asemenea numit emițătorul/emitentul evenimentului.
După ce evenimentul a avut loc, este plasat în coada de evenimente (event queue), asigurându-se că evenimentele care au fost generate primele vor fi de asemenea procesate primele. Ciclul de evenimente (event loop) verifică constant dacă există un nou eveniment în coada de evenimente și, dacă există, evenimentul corespunzător este trimis către gestionarii de evenimente (event handler).
În JavaScript, acești gestionari de evenimente sunt reprezentați de funcții simple, care permit să reacționeze la evenimentul care a apărut. Această abordare este denumită de asemenea programare bazată pe evenimente (event-driven programming).
Dacă pentru un eveniment nu sunt definite gestionare, atunci se execută acțiunea definită implicit de către browser.
În JavaScript, există următoarele tipuri de evenimente:
- Evenimente ale mouse-ului (deplasarea cursorului, clicul mouse-ului etc.)
- Evenimente ale tastaturii (apăsarea sau eliberarea unei taste a tastaturii)
- Evenimente ale ciclului de viață al elementelor (de exemplu, evenimentul de încărcare a paginii web)
- Evenimente ale elementelor de formular (apăsarea unui buton pe formular, selectarea unui element dintr-un meniu derulant etc.)
- Evenimente care apar la modificarea elementelor DOM
- Evenimente care apar la atingerea pe ecranele tactile
- Evenimente care apar în caz de erori
Este de remarcat faptul că utilizarea evenimentelor nu este limitată doar la interfața grafică, deși interfața grafică este cea mai demonstrativă sferă de aplicare a evenimentelor.
Să luăm în considerare cea mai simplă procesare a evenimentelor. De exemplu, pe o pagină web avem următorul element div:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<div id="rect" onclick="console.log('Clicked!')" style="width:50px;height:50px;background-color:blue;"></div>
</body>
</html>Aici este definit un bloc div obișnuit, care are atributul onclick, ce stabilește gestionarul pentru evenimentul de apăsare pe blocul div.
Adică, pentru a procesa un anumit eveniment, trebuie să definim un gestionar pentru el. Gestionarul reprezintă un cod în limbajul JavaScript. În acest caz, gestionarul pur și simplu afișează un șir de caractere în consolă:
console.log('Clicked!')Și la apăsarea pe bloc, vom putea vedea în consola browserului mesajul corespunzător:
Evenimente de bază
În câteva cuvinte, voi enumera principalele evenimente pe care le putem utiliza în JavaScript.
Evenimente mouse
Evenimentele tastaturii
Evenimente ale elementelor de formular
Evenimente de focalizare
Evenimente comune ale interfeței
Evenimente pentru dispozitive mobile și alte dispozitive cu ecrane tactile
