Que es el evento.objetivo en JavaScript?

Un "evento"Ocurre cuando cambia el estado de un objeto. Las actividades del usuario, como presionar cualquier tecla o hacer clic en el mouse, pueden hacer que ocurran eventos. Hay algunas propiedades de un evento en JavaScript que ayuda en las funciones de manejo de eventos. El "evento.objetivo"Es uno de ellos que identifica qué elemento específico desencadenó el evento.

Esta publicación ilustrará el "evento.objetivo ”y su uso en JavaScript.

¿Qué es "Evento?.objetivo ”en JavaScript?

El "evento.objetivo"Es una propiedad/atributo de"evento"En JavaScript. Se refiere al elemento que desencadenó el evento. Para acceder al evento.atributo de destino, el evento del elemento debe ser escuchado. El "addEventListener ()El método se utiliza para escuchar el evento específico.

Sintaxis

Para usar el "evento.propiedad ", siga la sintaxis dada:

elemento.addEventListener ("", function (evento)
consola.Log (evento.objetivo)
)

En la sintaxis dada,

• El "addEventListener ()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 activó el evento usando el "evento.objetivo" propiedad.

Aquí, crearemos un botón asignando una ID "btn"Eso se usa en JavaScript para acceder al botón:

Haga clic aquí

En el archivo JavaScript, primero, obtendremos la referencia del botón utilizando su ID asignada con la ayuda del "getElementById ()" método:

Const Button = documento.getElementById ('btn');

Adjunte un oyente de eventos con el botón. El "hacer clic"El evento se inicia en el clic del botón, y el objeto del evento se pasa al oyente del evento como argumento. El "evento.objetivoSe puede acceder al atributo desde la función del oyente para obtener una referencia al elemento de botón que activó el evento:

botón.addEventListener ('Click', function (Event)
consola.Log ('Evento de destino:', evento.objetivo);
);

La salida muestra la referencia del botón específico que se hace clic:

Puede obtener más información y aplicar diferentes funcionalidades como el estilo en el evento objetivo utilizando sus atributos.

¿Cuáles son los atributos de "evento?.objetivo"?

Hay varios atributos del "evento.Propiedad de objetivo "que proporciona información sobre el elemento objetivo. Pocos de los atributos comunes del evento.El objeto objetivo es el siguiente:

evento.atributos objetivo	Descripción
evento.objetivo.nombre de etiqueta	Utilizado para obtener el "nombre"De la etiqueta HTML del elemento objetivo.
evento.objetivo.valor	Utilizar para recuperar el "valor"Del elemento objetivo. Este atributo se usa principalmente para elementos de entrada.
evento.objetivo.identificación	Por conseguir el "identificación"Atributo del elemento objetivo, use el atributo dado.
evento.objetivo.Lista de clase	La lista de "clases"Contiene el elemento de destino se accede mediante este atributo.
evento.objetivo.contenido del texto	Utilizado para obtener el "contenido del texto"Del elemento objetivo.
evento.objetivo.href	Este atributo recupera el "href"Atributo del elemento objetivo, como enlaces.
evento.objetivo.estilo	Para modificar el "CSSPropiedad del elemento objetivo, use este atributo.

Ejemplo 1: Cambie el color de fondo del elemento objetivo

En el ejemplo proporcionado, cambiaremos el color de fondo del elemento de destino utilizando el "estilo"Atributo en el"hacer clic" evento:

Const Button = documento.getElementById ('btn');
botón.addEventListener ('Click', function (Event)
evento.objetivo.estilo.backgroundColor = "Blue";
);

Producción

Ejemplo 2: Obtenga el valor del elemento objetivo

Crear un campo de texto de entrada y un área para mostrar texto usando

etiqueta. Asignar IDS al campo de entrada y

etiqueta como "TakeInput" y "espectáculo", Respectivamente:

Obtenga la referencia del campo de texto utilizando el "getElementById ()" método:

entrada var = documento.getElementById ("TakeInput");

Utilizar el "valor"Atributo con el"evento.objetivo"Para obtener el valor del elemento objetivo:

aporte.addEventListener ("input", (event) =>
documento.getElementByID ("show").innerhtml = evento.objetivo.valor;
)

Como puede ver, el valor ingresado en el cuadro de texto se ha recuperado con éxito utilizando el "valor" atributo:

Eso fue todo sobre el "evento.objetivo ”en JavaScript.

Conclusión

El "evento.objetivo"Se refiere al elemento que activó/inició el evento. Hay algunos atributos del "evento.Propiedad de objetivo "que proporciona información sobre el elemento objetivo. Por ejemplo, "evento.objetivo.nombre de etiqueta",".valor",".identificación",".estilo", etcétera. Esta publicación ilustra el "evento.objetivo ”, sus atributos y su uso en JavaScript.