Multe aplicații web se bazează pe o anumită formă de eveniment pentru a-și îndeplini funcțiile. La un moment dat, un om interacționează cu interfața sa, ceea ce generează un eveniment. Aceste evenimente conduse de oameni se bazează de obicei pe un dispozitiv periferic, cum ar fi un mouse sau o tastatură.

Când un dispozitiv creează un eveniment, programul îl poate asculta, pentru a ști când să efectueze un anumit comportament. În acest tutorial, veți învăța cum să ascultați evenimente folosind JavaScript.

Ce este programarea bazată pe evenimente?

Programarea bazată pe evenimente este numele unei paradigme care se bazează pe execuția unui eveniment pentru a-și îndeplini funcțiile. Este posibil să creați un program bazat pe evenimente în orice limbaj de programare de nivel înalt. Dar programarea bazată pe evenimente este cea mai comună în limbaje precum JavaScript care se integrează cu o interfață cu utilizatorul.

Ce este un ascultător de evenimente?

Un ascultător de evenimente este o funcție care inițiază un proces predefinit dacă are loc un anumit eveniment. Deci, un ascultător de eveniment „ascultă” o acțiune, apoi apelează o funcție care îndeplinește o sarcină asociată. Acest eveniment poate lua una dintre multele forme. Exemplele obișnuite includ evenimente de mouse, evenimente de tastatură și evenimente de fereastră.

Crearea unui ascultător de evenimente utilizând JavaScript

Puteți asculta evenimente pe orice element în DOM. JavaScript are un addEventListener() funcție pe care o puteți apela pe orice element dintr-o pagină web. The addEventListener() funcția este o metodă a EventTarget interfata. Toate obiectele care suportă evenimente implementează această interfață. Aceasta include fereastra, documentul și elementele individuale de pe pagină.

Funcția addEventListener() are următoarea structură de bază:

element.addEventListener(„eveniment”, functionToExecute);

Unde:

• cel element poate reprezenta orice etichetă HTML (de la un buton la un paragraf)
• cel "eveniment" este un șir care denumește o acțiune specifică, recunoscută
• cel functionToExecute este o referire la o funcție existentă

Să creăm următoarea pagină web care are câteva elemente HTML:

Bine ati venit


 Bună, bine ați venit pe site-ul meu.


Aflați mai multe





Informații despre utilizator

Nume de utilizator: 

Trimite

Codul HTML de mai sus creează o pagină simplă care trimite la un fișier JavaScript numit app.js. The app.js fișierul va conține codul pentru a configura ascultătorii de evenimente. Deci, dacă doriți să inițiați un anumit proces ori de câte ori un utilizator face clic pe primul buton de pe pagina web, acesta este fișierul în care să îl creați.

Fișierul app.js

document.querySelector('.btn').addEventListener(„clic”, clickDemo)
funcția clickDemo(){
 console.log(„Bună ziua”)
}

Codul JavaScript de mai sus accesează primul buton de pe pagină utilizând querySelector() funcţie. Apoi adaugă un ascultător de evenimente la acest element folosind addEventListener() metodă. Evenimentul specific pe care îl ascultă are numele „clic”. Când butonul declanșează acel eveniment, ascultătorul va suna clickDemo() funcţie.

Legate de: Aflați cum să utilizați selectoarele DOM

The clickDemo() funcția afișează „Bună ziua” pe consola browserului. De fiecare dată când faceți clic pe butonul, ar trebui să vedeți această ieșire în consola dvs.

Ieșirea evenimentului „clic”.

Ce sunt evenimentele mouse-ului?

JavaScript are un MouseEvent interfață care reprezintă evenimente care apar din cauza interacțiunii utilizatorului cu mouse-ul. Mai multe evenimente folosesc MouseEvent interfata. Aceste evenimente includ următoarele:

• clic
• dblclick
• mousemove
• mouse-ul peste
• mouseout
• mouse-ul
• jos mouse-ul

The clic evenimentul are loc atunci când un utilizator apasă și eliberează un buton al mouse-ului în timp ce indicatorul acestuia este peste un element. Este exact ceea ce s-a întâmplat în exemplul anterior. După cum puteți vedea din lista de mai sus, evenimentele mouse-ului pot lua mai multe forme.

Un alt eveniment comun al mouse-ului este dblclick, care înseamnă dublu clic. Aceasta se declanșează atunci când un utilizator face clic pe butonul mouse-ului de două ori în succesiune rapidă. Un lucru remarcabil despre addEventListener() Funcția este că îl puteți folosi pentru a atribui mai mulți ascultători de evenimente unui singur element.

Adăugarea unui eveniment dblclick la primul buton

document.querySelector('.btn').addEventListener(„dblclick”, dblclickDemo)
funcția dblclickDemo(){
 alert(„Aceasta este o demonstrație a modului de creare a unui eveniment cu dublu clic”)
}

Adăugarea codului de mai sus la fișierul app.js va crea efectiv un al doilea ascultător de evenimente pentru primul buton de pe pagina web. Deci, făcând clic pe primul buton de două ori, se va crea următoarea alertă în browser:

În imaginea de mai sus veți vedea alerta care este generată și, de asemenea, veți vedea că încă două ieșiri „Bună ziua” sunt în consolă. Acest lucru se datorează faptului că un eveniment de dublu clic este o combinație de două evenimente de clic și există ascultători de evenimente pentru ambele clic si dblclick evenimente.

Numele celorlalte evenimente de mouse din listă descriu comportamentul acestora. The mousemove evenimentul are loc de fiecare dată când un utilizator își mișcă mouse-ul când cursorul se află peste un element. The mouse-ul evenimentul are loc atunci când un utilizator ține apăsat un buton deasupra unui element, apoi îl eliberează.

Ce sunt evenimentele de la tastatură?

JavaScript are un KeyboardEvent interfata. Acesta ascultă interacțiunile dintre un utilizator și tastatura acestuia. În trecut, KeyboardEvent a avut trei tipuri de evenimente. Cu toate acestea, JavaScript a depreciat de atunci apăsarea tastei eveniment.

Asa ca tastare și Tasta în jos evenimentele sunt singurele două evenimente de tastatură recomandate, care sunt tot ce aveți nevoie. The Tasta în jos evenimentul are loc atunci când un utilizator apasă pe o tastă și tastare evenimentul are loc atunci când un utilizator îl eliberează.

Revizuind exemplul HTML de mai sus, cel mai bun loc pentru a adăuga un ascultător de evenimente de la tastatură este pe intrare element.

Adăugarea unui ascultător de evenimente de la tastatură la fișierul app.js

let greetings = document.querySelector('p');
document.querySelector('input').addEventListener(„keyup”, captureInput)
function captureInput (e){
 greetings.innerText = (`Bună ziua ${e.target.value}, bun venit pe site-ul meu.`)
}

Codul de mai sus folosește querySelector() funcţia de acces la paragraful şi intrare elemente de pe pagină. Apoi cheamă addEventListener() metoda pe intrare element, care ascultă pentru tastare eveniment. Ori de câte ori a tastare are loc evenimentul captureInput() funcția preia valoarea cheie și o adaugă la paragraful de pe pagină. The e parametrul reprezintă evenimentul, pe care JavaScript îl atribuie automat. Acest obiect eveniment are o proprietate, țintă, care este o referință la elementul cu care a interacționat utilizatorul.

În acest exemplu, eticheta atașată la intrare câmpul solicită un nume de utilizator. Dacă introduceți numele dvs. în câmpul de intrare, atunci pagina web va arăta cam așa:

Paragraful conține acum valoarea de intrare care, în exemplul de mai sus, este „Jane Doe”.

addEventListener captează toate tipurile de interacțiuni ale utilizatorului

Acest articol v-a prezentat addEventListener() metoda, precum și mai multe evenimente de mouse și tastatură pe care le puteți utiliza cu aceasta. În acest moment, știți cum să ascultați un anumit eveniment și cum să creați o funcție care să răspundă la acesta.

The addEventListener oferă o capacitate suplimentară, totuși, prin intermediul celui de-al treilea parametru. Îl poți folosi pentru a controla propagarea evenimentelor: ordinea în care evenimentele se deplasează de la elemente la părinții sau copiii lor.

Înțelegerea propagării evenimentelor în JavaScript

Evenimentele sunt o funcție JavaScript puternică. Înțelegerea modului în care un browser web le ridică împotriva elementelor este cheia pentru stăpânirea utilizării lor.

Citiți în continuare

Despre autor