Objetivo de evento en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Objetivo de evento en JavaScript
Muhammad Muzammil Hussain 12 julio 2022
JavaScript JavaScript Event
Objetivo de evento en JavaScript

En este artículo, aprenderemos la propiedad event.target en el código fuente de JavaScript y el beneficio de esa propiedad en la página web de JavaScript.

Objetivo de evento en JavaScript

La propiedad event.target ayuda a encontrar el nombre del elemento HTML utilizado para desencadenar el evento. Por ejemplo, si llamamos a una función desde un evento de clic en un elemento HTML, podemos determinar el nombre del elemento especificado para activar y llamar a una función.

Para obtener esa propiedad, llamamos a event.target y la almacenamos en una variable como let variable = event.target. Ahora, podemos obtener múltiples propiedades event.target con esa variable.

Devuelve una referencia al objeto en el que ocurrió el evento. Con la ayuda de la propiedad target del evento, podemos realizar las siguientes tareas.

  1. Podemos obtener el elemento que desencadena el evento.
  2. Podemos acceder a las propiedades del element.
  3. Podemos modificar fácilmente algunas propiedades del elemento.

Los navegadores web modernos son totalmente compatibles con esta propiedad de evento objetivo.

Sintaxis básica:

var property = event.target;
var elementName = property.tagName

En el siguiente ejemplo, utilizaremos el objeto event.target y la propiedad tagName juntos para determinar el nombre del elemento utilizado para activar un evento al hacer clic y llamar a la función declarada.

Ejemplo:

<!DOCTYPE html>
<html>
   <body onclick="myFunction(event)">
      <h1 style="color:blueviolet">DelftStack Learning</h1>
      <h3>JavaScript Target event property</h3>
      <p>Click on button on this web page in this document to find out the element name which is used to triggered the event.</p>
      <button>Click here</button>
      <p id="myPara"></p>
      <script>
         function myFunction(event) {
             var myVariable = event.target; // get tagert event property
             document.getElementById("myPara").innerHTML = "Event triggered by a " + myVariable.tagName + " element";
         }
      </script>
   </body>
</html>

En la fuente de la página web HTML anterior, hemos utilizado el botón del elemento HTML para activar un evento y llamar a myFunction. En esa función, tenemos que obtener un evento como argumento, usar la variable myVariable y almacenar la propiedad usando el evento.

Luego, simplemente usamos el predeterminado document.getElementById('myPara').innerHTML para asignar la cadena de texto al elemento de párrafo. Ya hemos creado el elemento de párrafo en el cuerpo y le hemos asignado el id myPara.

Hemos concatenado el nombre de la etiqueta con myVariable.tagName para mostrar el nombre del elemento en el párrafo. Puede guardar la fuente anterior en la extensión HTML, abrirla en el navegador y ver el resultado.

Artículo relacionado - JavaScript Event