Ce sunt evenimentele browserului?

Un eveniment se referă la o acțiune sau apariție care se întâmplă în sistemul pe care îl programați. Apoi, sistemul vă anunță despre eveniment, astfel încât să puteți răspunde la acesta într-un fel, dacă este necesar.

În acest articol, mă voi concentra asupra evenimentelor din contextul browserelor web. În esență, un eveniment este un indicator care arată că a avut loc o anumită acțiune, astfel încât să puteți răspunde corespunzător.

Pentru a ilustra despre ce vorbesc, să ne imaginăm că stai la o trecere de pietoni așteptând schimbarea semaforelor, astfel încât să poți traversa în siguranță drumul. Evenimentul este schimbarea semaforului care te face să faci ulterior o acțiune – care, în acest caz, traversează drumul.

În mod similar, în dezvoltarea web, putem lua o acțiune ori de câte ori are loc un eveniment în care avem interes.

Unele dintre evenimentele obișnuite pe care le-ați putea întâlni în dezvoltarea web includ:

ad-banner
  1. Evenimente mouse
  • click
  • dblclick
  • mousemove
  • mouseover
  • mousewheel
  • mouseout
  • contextmenu
  • mousedown
  • mouseup

2. Atingeți evenimente

  • touchstart
  • touchmove
  • touchend
  • touchcancel

3. Evenimente de la tastatură

  • keydown
  • keypress
  • keyup

4. Formați evenimente

  • focus
  • blur
  • change
  • submit

5. Evenimente de fereastră

  • scroll
  • resize
  • hashchange
  • load
  • unload

Pentru o listă completă a evenimentelor și a diferitelor categorii în care se încadrează, puteți consulta Documentația MDN. Unele dintre evenimentele enumerate sunt evenimente standard în specificațiile oficiale, în timp ce altele sunt evenimente utilizate intern de anumite browsere.

Ce sunt gestionarele de evenimente?

După cum sa menționat mai sus, monitorizăm evenimentele astfel încât, ori de câte ori primim o notificare că evenimentul a avut loc, programul poate lua măsurile corespunzătoare.

Această acțiune este adesea întreprinsă în funcțiile numite gestionari de evenimente care sunt, de asemenea, denumite ascultători de evenimente. Dacă are loc un eveniment și este invocat gestionarul de evenimente, spunem că un eveniment a fost înregistrat. Acest lucru este ilustrat în codul de mai jos.

Dacă butonul cu id btn se face clic, se apelează gestionarul de evenimente și se afișează o alertă cu textul „Butonul a fost făcut clic”. onclick proprietatea a fost atribuită unei funcții care este gestionarea evenimentelor. Acesta este unul dintre cele trei moduri de a adăuga un gestionar de evenimente la un element DOM.

const button = document.getElementById("btn");
button.onclick = function(){
   alert("Button has been clicked");
}

Merită să subliniem că gestionari de evenimente sunt declarate mai ales ca funcții, dar pot fi și obiecte.

Cum se atribuie gestionare de evenimente

Există mai multe moduri de a atașa gestionare de evenimente la elemente HTML. Vom discuta mai jos despre aceste metode, împreună cu argumentele pro și contra.

Atribuiți un gestionar de evenimente cu un atribut HTML

Acesta este cel mai simplu mod de a atașa un handler de evenimente la elemente HTML, deși este cel mai puțin recomandat. Aceasta implică utilizarea unui atribut de eveniment HTML în linie numit on<event> a cărei valoare este gestionatorul de evenimente. De exemplu onclick, onchange, onsubmit si asa mai departe.

Rețineți că nu este neobișnuit să găsiți atribute de eveniment HTML denumite onClick, onChange sau onSubmit deoarece atributele HTML nu sunt sensibile la majuscule și minuscule. În esență, este corect din punct de vedere sintactic de utilizat onclick, onClick sau ONCLICK. Dar este o practică obișnuită să o lăsați cu litere mici.

<button onclick = "alert('Hello world!')"> Click Me </button>
<button onclick = "(() => alert('Hello World!'))()"> Click Me Too </button>
<button onclick = "(function(){alert('Hello World!')})()"> And Me </button>

În exemplul de mai sus, codul JavaScript a fost atribuit literal atributului de eveniment HTML.

Luați notă de formatul Expresia funcției invocate imediat (IIFE) în ultimele două button elemente. Deși acest lucru pare ușor și simplu, atribuirea unui atribut de eveniment HTML în linie este ineficientă și dificil de întreținut.

Să presupunem că aveți peste 20 de astfel de butoane în marcaj. Ar fi repetitiv să scrieți același cod JavaScript pentru fiecare buton. Este întotdeauna mai bine să scrieți JavaScript în propriul fișier, astfel încât să puteți utiliza cu ușurință același cod pentru mai multe fișiere HTML.

În plus, nu puteți avea mai multe linii de cod JavaScript în linie. Codul JavaScript Inline este considerat un anti-model din motivele menționate mai sus. Deci, încercați să o evitați, cu excepția cazului în care încercați ceva rapid.

Declarați un gestionar de evenimente într-un script etichetă

În loc să faceți cele de mai sus, puteți declara și gestionarul de evenimente într-un script etichetați și invocați-l în linie, așa cum se arată mai jos.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/javascript-events-explained-in-simple-english/./index.css" type="text/css" />
    <script>
      function onClickHandler(){
         alert("Hello world!");
       }
    </script> 
  </head>
  <body>
    <div class="wrapper">
       <button onclick = "onClickHandler()"> Click me </button>
    </div>
  </body>
</html>

Observați, totuși, că pur și simplu atribuirea numelui funcției ca valoare a atributului eveniment HTML cum ar fi onclick = "onClickHandler" nu va funcționa. Trebuie să-l invocați așa cum se arată mai sus, încadrând invocarea în ghilimele la fel ca valoarea oricărui atribut HTML.

Atribuiți un gestionar de evenimente utilizând proprietatea DOM

În loc să utilizați atributul de eveniment HTML în linie ilustrat mai sus, puteți atribui, de asemenea, gestionarul de evenimente ca valoare a unei proprietăți de eveniment pe elementul DOM. Acest lucru este posibil numai în interiorul unui script sau într-un fișier JavaScript.

O limitare a acestei abordări este că nu puteți avea mai multe gestionare de evenimente pentru același eveniment. Dacă aveți mai multe gestionare pentru același eveniment, așa cum este ilustrat mai jos, numai ultimul va fi aplicat. Celelalte vor fi suprascrise.

const button = document.getElementById("btn");
button.onclick = function(){
   alert("Button has been clicked");
}
// Only this is applied
button.onclick = function(){
   console.log("Button has been clicked");
}

Dacă doriți să eliminați ascultătorul de evenimente din onclick eveniment, puteți pur și simplu realocați button.onclick la null.

button.onclick = null

Cum se îmbunătățește metoda DOM de adăugare a ascultătorilor de evenimente

Metoda de mai sus pentru a adăuga ascultători de evenimente este preferabilă utilizării JavaScript inline. Totuși, are o limitare a restricționării unui element pentru a avea un singur gestionar de evenimente pentru fiecare eveniment.

De exemplu, nu puteți aplica mai multe gestionare de evenimente pentru un eveniment de clic pe un element.

Pentru a remedia această limitare, addEventListener și removeEventListener au fost introduse. Aceasta vă permite să adăugați mai multe gestionare de evenimente pentru același eveniment pe același element.

const button = document.getElementById('btn');
button.addEventListener('click', () => {
  alert('Hello World');
})
button.addEventListener('click', () => {
  console.log('Hello World');
})

În codul de mai sus, un element cu id btn este selectat și apoi monitorizat pentru a click eveniment prin atașarea a două gestionare de evenimente. Primul gestionar de evenimente va fi invocat și va primi un mesaj de alertă Hello World apare. Ulterior Hello World va fi logat și în consolă.

După cum ați fi observat din exemplele de mai sus, semnătura funcției a element.addEventListener este:

element.addEventListener(event, eventHandler, [optional parameter])

Parametrii la addEventListener metodă

  1. eveniment

Primul parametru, event (care este un parametru obligatoriu) este un șir care specifică numele evenimentului. De exemplu "click", "mouseover", "mouseout" si asa mai departe.

2. organizatorul evenimentului

Al doilea parametru, care este necesar și ca primul, este o funcție care este invocată atunci când apare evenimentul. Un obiect eveniment este trecut ca primul său parametru. Obiectul eveniment depinde de tipul evenimentului. De exemplu, a MouseEvent obiectul este transmis pentru un eveniment de clic.

3. Parametru opțional

Al treilea parametru, care este un parametru opțional, este un obiect cu proprietățile:

  • once: Valoarea sa este un boolean. Dacă true, ascultătorul este eliminat după ce se declanșează.
  • capture: Valoarea sa este, de asemenea, un boolean. Setează faza în care ar trebui să se ocupe de eveniment, care este fie în faza de clocotire, fie de captare. Valoarea implicită este false , prin urmare evenimentul este capturat în faza de barbotare. Puteți citi mai multe despre asta aici. Din motive istorice, pot fi și opțiuni true sau false.
  • passive: Valoarea sa este, de asemenea, un boolean. Dacă este true, atunci gestionarul nu va suna preventDefault(). preventDefault() este o metodă a obiectului eveniment.

În mod similar, dacă doriți să opriți monitorizarea click eveniment, puteți utiliza element.removeEventListener. Dar acest lucru funcționează numai dacă ascultătorul de evenimente a fost înregistrat folosind element.addEventListener. Semnătura funcției este similară cu cea a element.addEventListener.

element.removeEventListener(event, eventHandler, [options])

Pentru noi să o folosim element.removeEventListener pentru a elimina un event, funcția a trecut ca al doilea argument către element.addEventListener trebuie să fie o funcție numită atunci când adăugați ascultătorul de evenimente. Acest lucru asigură că aceeași funcție poate fi transmisă element.removeEventListener dacă vrem să-l eliminăm.

De asemenea, merită menționat aici faptul că, dacă ați transmis argumentele opționale către gestionarul de evenimente, atunci trebuie să transmiteți aceleași argumente opționale către removeEventListener.

const button = document.getElementById('btn');
button.removeEventListener('click', clickHandler)

Ce sunt obiectele de eveniment?

Un gestionar de evenimente are un parametru numit obiect de eveniment care deține informații suplimentare despre eveniment.

Informațiile stocate în obiect de eveniment depinde de tipul evenimentului. De exemplu, obiect de eveniment trecut la o click gestionarul de evenimente are o proprietate numită target care face referire la elementul din care a apărut evenimentul de clic.

În exemplul de mai jos, dacă faceți clic pe elementul cu id btn, event.target o va face referire. Toate gestionarele de evenimente cu clicuri sunt transmise și obiect de eveniment cu target proprietate. După cum sa menționat deja, diferite evenimente au avut obiect de eveniment parametri care stochează informații diferite.

const button = document.getElementById("btn");
button.addEventListener("click", event => {
  console.log(event.target);
})

Valoarea a this

Într-un event handler, valoarea this este elementul pe care este înregistrat gestionarul de evenimente. Rețineți că elementul pe care este înregistrat gestionarul de evenimente poate să nu fie neapărat același cu elementul pe care a avut loc evenimentul.

De exemplu, în codul de mai jos, gestionarul de evenimente este înregistrat pe ambalaj. În mod normal, valoarea this este la fel ca event.currentTarget. Dacă faceți clic pe button, valoarea a this interior onClickHandler este div Nu button pentru că este div pe care este înregistrat gestionarul de evenimente, deși clicul provine din buton.

Aceasta se numește event propagation. Este un concept foarte important despre care puteți citi aici dacă sunteți interesat.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/javascript-events-explained-in-simple-english/./index.css" type="text/css" />
    <script>
      function onClickHandler(){
         console.log(this)
         alert("Hello world!");
       }
       const wrapper = document.querySelector(".wrapper");
       wrapper.addEventListener("click", onClickHandler);
    </script> 
  </head>
  <body>
    <div class="wrapper">
       <button> Click me </button>
    </div>
  </body>
</html>

Concluzie

În acest articol ne-am uitat la:

  • Evenimente din browser și ce sunt acestea
  • Diferite moduri de a adăuga gestionare de evenimente la elementele DOM
  • Parametrii obiectului eveniment pentru gestionarii de evenimente
  • Valoarea a this într-un gestionar de evenimente