Eventos DOM en JavaScript
Los eventos en JavaScript son lanzados para notificar cambios de interés en la ejecución del código o interacción del usuario con el navegador. En este post, veremos los eventos más importantes en JavaScript.
Manejador de Eventos: Para reaccionar a los eventos del navegador necesitamos un manejador de eventos. En cuestión, para definir este comportamiento necesitamos el método addEventListener sobre el elemento al cual le vamos a definir el manejador.
Evento click
Este evento es lanzado cuando se hace clic con el mouse o con un touchpad en algún elemento de la página.
<button>Click</button>Con el siguiente script cada vez que se haga clic en el botón se cambiará el texto del botón para mostrar la cantidad de clicks.
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.textContent = `Click count: ${event.detail}`;
});Te invito a que hagas click en el siguiente botón varias veces y esperes un momento para hacer clic nuevamente. Verás que el conteo se reinicia. Esto es un poco difícil de entender al comienzo pero imagina que quieres desarrollador un tipo de sistema de archivos web, entonces te gustará saber cuando hacen un clic para seleccionar el elemento y cuando hacen dos para abrir una carpeta por ejemplo.
Evento mousemove
Este evento es lanzado cuando se mueve el mouse sobre un elemento.
<div id="mouse"></div>El siguiente script muestra la posición del mouse en cada punto del contenedor.
document.querySelector("#mouse").addEventListener("mousemove", event => {
event.target.textContent = `position: ${event.offsetX}x, ${event.offsetY}y`
});
Eventos mousedown y mouseup
Estos eventos corresponden a cuando haces un clic con el mouse. Cuando haces clic con el mouse suceden dos cosas, la primera persionas el botón principal del mouse (mousedown) esperas un poco y seguidamente sueltas la presión (mouseup).
<div id="mouse"></div>El siguiente script muestra el efecto de dar clic en los dos eventos mencionados. Tómate tu tiempo para probarlo y demorarte un poco dando el clic.
const element = document.querySelector("#mouse")
element.addEventListener("mousedown", event => {
element.classList.remove("unpressed")
element.classList.add("pressed")
})
element.addEventListener("mouseup", event => {
element.classList.remove("pressed")
element.classList.add("unpressed")
})
Uso de this en eventos
Regresemos un momento al ejemplo del evento click.
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.textContent = `Click count: ${event.detail}`;
});La cuestión con este código es que no permite usar this dentro de la función flecha. Si deseas conocer un poco más sobre este tipo de funciones y su comportamiento te invito a visitar nuestro post Arrow functions en JavaScript (funciones flecha).
Ahora bien, para qué usaríamos this en este caso ?, la respuesta es que en este contexto this es el elemento en cuestión. Para permitirnos este manejo debemos cambiar la función flecha por una declaración de función.
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
this.textContent = `Click count: ${event.detail}`;
});Uso de parámetros adicionales en eventos
Por defecto, la función anónima que pasamos como segundo parámetro de addEventListener automáticamente coloca el evento (event) como primer parámetro de la función. Supongamos que queremos agregar un parámetro adicional en el ejemplo anterior para indicar un texto en el botón. Lo primero que debemos hacer es envolver la función principal en una función anónima así:
const button = document.querySelector('button');
const counter = function(event) {
this.textContent = `Click count: ${event.detail}`;
}
button.addEventListener('click', function(event) {
counter(event)
});La cuestión con este código es que el this ya no funcionará porque no está en el mismo contexto. Vamos a hacer un pequeño ajuste.
const button = document.querySelector('button');
const counter = function(event, button) {
button.textContent = `Click count: ${event.detail}`;
}
button.addEventListener('click', function(event) {
counter(event, this)
});Nuevamente nuestro código funciona, el siguiente y último paso es agregar el parámetro que queremos en nuestra función.
const button = document.querySelector('button');
const counter = function(event, button, text) {
button.textContent = `${text} ${event.detail}`;
}
button.addEventListener('click', function(event) {
counter(event, this, 'Click count is:')
});