JavaScript es un lenguaje de programación que nos permite desarrollar tanto para el backend como para el frontend de la web. Para ello, JavaScript ha desarrollado una sintaxis muy completa con distintos objetos nativos. En este post, te enseñaremos qué es y cómo funciona el comando event.target en JavaScript, una propiedad muy importante del objeto nativo event.
¿Qué es event.target en JavaScript o E target JS?
Event.target en JavaScript, o E target JS, es el comando que nos permite acceder a la propiedad target de un objeto event. Puedes conocer esta propiedad al pintar un evento recibido en tu navegador usando console.log (event) y desplegar el objeto obtenido desde el inspector.
El comando event.target en JavaScript se refiere más específicamente al elemento que está emitiendo un evento. Entonces, para poner un ejemplo, crearemos un evento de manera imperativa con la siguiente línea de código:
button.addEventListener (‘click’, doSomething);
Si no sabes cómo funciona la sintaxis anterior, te invitamos a leer nuestro post sobre manejar eventos imperativos en frontend JavaScript.
En este caso, estamos creando un escuchador de un evento click que ejecutará la función doSomething sobre el elemento HTML del DOM que hayamos incluido en esta función. Ahora, ¿quién está emitiendo este evento? ¡El botón o event.target button JavaScript! En este orden de ideas, veremos que el valor de la propiedad target JS de este evento será button.
Ten presente que la propiedad target JS del objeto event es de solo lectura. Esto quiere decir que con el comando event.target en JavaScript solo podrás consultar el valor de esta propiedad, no modificarla con un proceso de igualación. Si quieres conocer más detalles sobre este comando, te invitamos a leer el artículo event.target en la página oficial de Mozilla Developer Network.
¿Cómo funciona event.target en JavaScript?
Con el ejemplo anterior, puede ser que hayas intuido que el comando event.target en JavaScript nos devuelve un nodo. Por ello, podremos ejecutar diversas acciones sobre este comando, pues estaremos realmente ejecutándolas sobre un nodo del DOM.
Si tienes dudas sobre qué métodos nos permiten determinar un nodo, te invitamos a leer nuestro post sobre seleccionar nodos del DOM. Si te resulta nuevo el concepto de DOM, te recomendamos leer otros artículos en nuestro blog de desarrollo web; algunos introductorios son Document Object Model y qué es un nodo en el DOM.
A continuación, te mostramos un ejemplo en el que ejecutamos el método removeElement sobre este comando, así como lo haríamos sobre cualquier nodo seleccionado:
event.target.remove ( );
Siguiendo nuestro ejemplo, con la línea de código anterior hemos hecho que se elimine del DOM el elemento HTML button. Si insertamos este comando dentro de la función doSomething, esto implicará que el botón se eliminará cada vez que el usuario hace click sobre él.
function doSomething (event) {
event.target.remove;
}
De este modo, el comando event.target ha actuado como si fuera el elemento HTML button, pues este es el nodo que ha emitido el evento. Para comprobar este comportamiento, te invitamos a revisar el inspector de tu navegador a la par que ejecutas las acciones (en este caso click). Si tienes dudas sobre este tema, te invitamos a leer sobre cómo funciona el inspector web y cómo entender el DOM desde el inspector.
Una de las razones por las que esta lógica funciona es porque hemos asignado la función doSomething como función manejadora del evento, es decir, como segundo parámetro del método addEventListener. Esto hace que el parámetro que luego insertamos en la función automáticamente sea el objeto de evento, sin importar el nombre que le demos.
Te recomendamos tener mucho cuidado con el nombre que decides ponerle al parámetro recibido por una función controladora de un evento. En muchas ocasiones podemos creer que nosotros controlamos el input de esta función y llamamos a propiedades como path o message. Sin embargo, siempre nos estaremos refiriendo al evento emitido.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué es y cómo funciona la propiedad event.target en JavaScript, te invitamos a seguir aprendiendo con nosotros sobre el mundo de este y otros lenguajes de programación para la web. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar lenguajes como JavaScript, HTML, CSS y JSX. ¿Te animas a seguir aprendiendo con nosotros? ¡Entra ya y pide información!
