Esta publicación ilustrará el 'event.target' y su uso en JavaScript.
¿Qué es 'event.target' en JavaScript?
El ' event.target ” es una propiedad/atributo de “ evento ” en JavaScript. Se refiere al elemento que desencadenó el evento. Para acceder al atributo event.target, se debe escuchar el evento del elemento. El ' agregarEventListener() El método ” se utiliza para escuchar el evento específico.
Sintaxis
Para usar la propiedad 'event.target', siga la sintaxis dada:
elemento. agregarEventListener ( '
consola. registro ( evento. objetivo )
} )
En la sintaxis dada,
- El ' agregarEventListener() El método se utiliza para agregar un controlador de eventos para el elemento específico.
- “
” indica cualquier evento, como “ hacer clic ”, “ ratón sobre ', etcétera.
Ejemplo
En el ejemplo dado, obtendremos el elemento que desencadenó el evento usando el ' event.target ' propiedad.
Aquí, crearemos un botón asignando una identificación ' btn ” que se usa en JavaScript para acceder al botón:
< identificación del botón = 'btn' > Haga clic aquí botón >
En el archivo JavaScript, primero, obtendremos la referencia del botón usando su id asignado con la ayuda de “ getElementById() ' método:
constante botón = documento. getElementById ( 'btn' ) ;Adjunte un detector de eventos con el botón. El ' hacer clic El evento se inicia al hacer clic en el botón y el objeto del evento se pasa al detector de eventos como un argumento. El ' event.target Se puede acceder al atributo ” desde la función de escucha para obtener una referencia al elemento del botón que activó el evento:
botón. agregarEventListener ( 'hacer clic' , función ( evento ) {consola. registro ( 'Evento objetivo:' , evento. objetivo ) ;
} ) ;
El resultado muestra la referencia del botón específico en el que se hace clic:
Puede obtener más información y aplicar diferentes funcionalidades como el estilo en el evento de destino utilizando sus atributos.
¿Cuáles son los atributos de 'event.target'?
Hay varios atributos de la propiedad 'event.target' que proporcionan información sobre el elemento de destino. Algunos de los atributos comunes del objeto event.target son los siguientes:
| Atributos de event.target | Descripción |
| event.target.tagname | Se utiliza para obtener el ' nombre ” de la etiqueta HTML del elemento de destino. |
| evento.objetivo.valor | Utilizar para recuperar el ' valor ” del elemento de destino. Este atributo se usa principalmente para elementos de entrada. |
| event.target.id | Por obtener el “ identificación ” atributo del elemento de destino, use el atributo dado. |
| event.target.classList | La lista de ' clases Este atributo accede a ” que contiene el elemento de destino. |
| event.target.textContent | Se utiliza para obtener el ' contenido del texto ” del elemento de destino. |
| evento.objetivo.href | Este atributo recupera el “ href ” atributo del elemento de destino, como enlaces. |
| event.target.style | Para modificar el “ CSS ” propiedad del elemento de destino, utilice este atributo. |
Ejemplo 1: cambiar el color de fondo del elemento de destino
En el ejemplo proporcionado, cambiaremos el color de fondo del elemento de destino usando el ' estilo atributo ” en el “ hacer clic ' evento:
constante botón = documento. getElementById ( 'btn' ) ;botón. agregarEventListener ( 'hacer clic' , función ( evento ) {
evento. objetivo . estilo . color de fondo = 'azul' ;
} ) ;
Producción
Ejemplo 2: obtener el valor del elemento de destino
Cree un campo de entrada de texto y un área para mostrar texto usando la etiqueta
. Asigne identificadores al campo de entrada y etiqueta
como ' tomar entrada ' y ' espectáculo ”, respectivamente:
< tipo de entrada = 'texto' identificación = 'tomar entrada' >< identificación p = 'espectáculo' > pag >
Obtenga la referencia del campo de texto usando el ' getElementById() ' método:
fue entrada = documento. getElementById ( 'tomar entrada' ) ;Utilizar el ' valor atributo ” con el “ event.target ” para obtener el valor del elemento objetivo:
aporte. agregarEventListener ( 'aporte' , ( evento ) => {documento. getElementById ( 'espectáculo' ) . HTML interno = evento. objetivo . valor ;
} )
Como puede ver, el valor ingresado en el cuadro de texto se ha recuperado con éxito utilizando el botón ' valor ' atributo:
Eso fue todo sobre el 'event.target' en JavaScript.
Conclusión
El ' event.target ” se refiere al elemento que activó/inició el evento. Hay algunos atributos de la propiedad 'event.target' que proporcionan información sobre el elemento de destino. Por ejemplo, ' event.target.tagname ”, “ .valor ”, “ .identificación ”, “ .estilo ', etcétera. Esta publicación ilustró el 'event.target', sus atributos y su uso en JavaScript.