Aquesta publicació il·lustrarà 'event.target' i el seu ús en JavaScript.
Què és 'event.target' a JavaScript?
El ' event.target ” és una propietat/atribut de “ esdeveniment ” en JavaScript. Es refereix a l'element que va desencadenar l'esdeveniment. Per accedir a l'atribut event.target, s'ha d'escoltar l'esdeveniment de l'element. El ' addEventListener() ” s'utilitza per escoltar l'esdeveniment específic.
Sintaxi
Per utilitzar la propietat 'event.target', seguiu la sintaxi donada:
element. addEventListener ( '
consola. registre ( esdeveniment. objectiu )
} )
En la sintaxi donada,
- El ' addEventListener() ” s'utilitza per afegir un controlador d'esdeveniments per a l'element específic.
- “
” indica qualsevol esdeveniment, com ara “ feu clic ”, “ ratolí sobre ', etcètera.
Exemple
En l'exemple donat, obtindrem l'element que va activar l'esdeveniment mitjançant el ' event.target ' propietat.
Aquí, crearem un botó assignant un identificador ' btn ” que s'utilitza a JavaScript per accedir al botó:
< identificador del botó = 'btn' > Clica aquí botó >
En el fitxer JavaScript, primer, obtindrem la referència del botó utilitzant el seu identificador assignat amb l'ajuda del ' getElementById() ” mètode:
const botó = document. getElementById ( 'btn' ) ;Adjunteu un oient d'esdeveniments amb el botó. El ' feu clic ” s'inicia l'esdeveniment en fer clic al botó i l'objecte d'esdeveniment es passa a l'oient d'esdeveniments com a argument. El ' event.target L'atribut ” és accessible des de la funció d'escolta per obtenir una referència a l'element botó que va activar l'esdeveniment:
botó. addEventListener ( 'clic' , funció ( esdeveniment ) {consola. registre ( 'Esdeveniment objectiu:' , esdeveniment. objectiu ) ;
} ) ;
La sortida mostra la referència del botó específic que es fa clic:
Podeu obtenir més informació i aplicar diferents funcionalitats com ara l'estil a l'esdeveniment objectiu mitjançant els seus atributs.
Quins són els atributs de “event.target”?
Hi ha diversos atributs de la propietat 'event.target' que proporcionen informació sobre l'element objectiu. Alguns dels atributs comuns de l'objecte event.target són els següents:
| Atributs event.target | Descripció |
| nom.etiqueta.destinació.de l'esdeveniment | S'utilitza per obtenir el ' nom ” de l'etiqueta HTML de l'element de destinació. |
| valor.objectiu.de.esdeveniment | Utilitzeu per recuperar el ' valor ” de l'element objectiu. Aquest atribut s'utilitza principalment per als elements d'entrada. |
| event.target.id | Per obtenir el ' id ” de l'element objectiu, utilitzeu l'atribut donat. |
| event.target.classList | La llista de ' classes ” que conté l'element objectiu s'accedeix mitjançant aquest atribut. |
| event.target.textContent | S'utilitza per obtenir el ' contingut de text ” de l'element objectiu. |
| event.target.href | Aquest atribut recupera el ' href ” atribut de l'element objectiu, com ara enllaços. |
| event.target.style | Per modificar el ' CSS ” propietat de l'element objectiu, utilitzeu aquest atribut. |
Exemple 1: Canvieu el color de fons de l'element objectiu
A l'exemple proporcionat, canviarem el color de fons de l'element de destinació mitjançant el ' estil 'atribut a ' feu clic ” esdeveniment:
const botó = document. getElementById ( 'btn' ) ;botó. addEventListener ( 'clic' , funció ( esdeveniment ) {
esdeveniment. objectiu . estil . color de fons = 'blau' ;
} ) ;
Sortida
Exemple 2: obteniu el valor de l'element objectiu
Creeu un camp de text d'entrada i una àrea per mostrar text amb l'etiqueta
. Assigneu identificadors al camp d'entrada i etiqueta
com a ' takeInput ' i ' espectacle ', respectivament:
< tipus d'entrada = 'text' id = 'prendre entrada' >< p id = 'espectacle' > pàg >
Obteniu la referència del camp de text utilitzant el ' getElementById() ” mètode:
va ser introduïda = document. getElementById ( 'prendre entrada' ) ;Utilitzar el ' valor 'atribut amb el ' event.target ” per obtenir el valor de l'element objectiu:
entrada. addEventListener ( 'entrada' , ( esdeveniment ) => {document. getElementById ( 'espectacle' ) . innerHTML = esdeveniment. objectiu . valor ;
} )
Com podeu veure que el valor introduït al quadre de text s'ha recuperat correctament mitjançant el ' valor ” atribut:
Això era tot sobre 'event.target' a JavaScript.
Conclusió
El ' event.target ” es refereix a l'element que va desencadenar/iniciar l'esdeveniment. Hi ha alguns atributs de la propietat 'event.target' que proporcionen informació sobre l'element objectiu. Per exemple, ' nom.etiqueta.destinació.de l'esdeveniment ”, “ .valor ”, “ .id ”, “ .estil ', etcètera. Aquesta publicació va il·lustrar 'event.target', els seus atributs i el seu ús en JavaScript.