Această postare va ilustra „event.target” și utilizarea acestuia în JavaScript.
Ce este „event.target” în JavaScript?
„ eveniment.ţintă ” este o proprietate/atribut al lui “ eveniment ” în JavaScript. Se referă la elementul care a declanșat evenimentul. Pentru a accesa atributul event.target, evenimentul elementului trebuie ascultat. „ addEventListener() ” este utilizată pentru a asculta evenimentul specific.
Sintaxă
Pentru a utiliza proprietatea „event.target”, urmați sintaxa dată:
element. addEventListener ( „
consolă. Buturuga ( eveniment. ţintă )
} )
În sintaxa dată,
- „ addEventListener() ” este folosită pentru adăugarea unui handler de evenimente pentru elementul specific.
- „
” indică orice eveniment, cum ar fi „ clic ”, “ mouse-ul peste ', și așa mai departe.
Exemplu
În exemplul dat, vom obține elementul care a declanșat evenimentul folosind „ eveniment.ţintă ” proprietate.
Aici, vom crea un buton prin atribuirea unui id „ btn ” care este folosit în JavaScript pentru accesarea butonului:
< ID-ul butonului = 'btn' > Click aici buton >
În fișierul JavaScript, mai întâi, vom obține referința butonului folosind id-ul atribuit cu ajutorul „ getElementById() ” metoda:
const buton = document. getElementById ( 'btn' ) ;Atașați un ascultător de evenimente cu butonul. „ clic ” evenimentul este inițiat la clicul butonului, iar obiectul eveniment este transmis ascultătorului evenimentului ca argument. „ eveniment.ţintă ” este accesibil din funcția de ascultător pentru a obține o referință la elementul butonului care a declanșat evenimentul:
buton. addEventListener ( 'clic' , funcție ( eveniment ) {consolă. Buturuga ( „Eveniment țintă:” , eveniment. ţintă ) ;
} ) ;
Ieșirea arată referința butonului specific pe care se face clic:
Puteți obține mai multe informații și puteți aplica diferite funcționalități, cum ar fi stilizarea evenimentului vizat, folosind atributele acestuia.
Care sunt atributele „event.target”?
Există diverse atribute ale proprietății „event.target” care oferă informații despre elementul țintă. Câteva dintre atributele comune ale obiectului event.target sunt după cum urmează:
| event.target Atribute | Descriere |
| eveniment.țintă.etichetă | Folosit pentru obținerea „ Nume ” din eticheta HTML a elementului țintă. |
| valoare.țintă.de eveniment | Utilizați pentru a prelua „ valoare ” a elementului țintă. Acest atribut este folosit mai ales pentru elementele de intrare. |
| eveniment.target.id | Pentru obținerea „ id ” al elementului țintă, utilizați atributul dat. |
| event.target.classList | Lista de „ clase ” care conține elementul țintă este accesat de acest atribut. |
| event.target.textContent | Folosit pentru obținerea „ continutul textului ” a elementului țintă. |
| eveniment.ţintă.href | Acest atribut preia „ href ” atributul elementului țintă, cum ar fi link-urile. |
| stilul.ţintă.evenimentului | Pentru modificarea „ CSS ” a elementului țintă, utilizați acest atribut. |
Exemplul 1: Schimbați culoarea de fundal a elementului țintă
În exemplul oferit, vom schimba culoarea de fundal a elementului țintă folosind „ stil ' atribut pe ' clic ” eveniment:
const buton = document. getElementById ( 'btn' ) ;buton. addEventListener ( 'clic' , funcție ( eveniment ) {
eveniment. ţintă . stil . culoare de fundal = 'albastru' ;
} ) ;
Ieșire
Exemplul 2: Obțineți valoarea elementului țintă
Creați un câmp de text de introducere și o zonă pentru afișarea textului folosind eticheta
. Atribuiți ID-uri câmpului de introducere și etichetei
ca „ takeInput ' și ' spectacol ”, respectiv:
< tip de introducere = 'text' id = 'takeInput' >< p id = 'spectacol' > p >
Obțineți referința câmpului de text folosind „ getElementById() ” metoda:
a fost introdus = document. getElementById ( 'takeInput' ) ;Folosește ' valoare atribut cu „ eveniment.ţintă ” pentru a obține valoarea elementului vizat:
intrare. addEventListener ( 'intrare' , ( eveniment ) => {document. getElementById ( 'spectacol' ) . innerHTML = eveniment. ţintă . valoare ;
} )
După cum puteți vedea că valoarea introdusă în caseta de text a fost preluată cu succes utilizând „ valoare ” atribut:
Acesta a fost totul despre „event.target” în JavaScript.
Concluzie
„ eveniment.ţintă ” se referă la elementul care a declanșat/a inițiat evenimentul. Există unele atribute ale proprietății „event.target” care oferă informații despre elementul țintă. De exemplu, ' eveniment.țintă.etichetă ”, “ .valoare ”, “ .id ”, “ .stil ', și așa mai departe. Această postare a ilustrat „event.target”, atributele sale și utilizarea sa în JavaScript.