Eventos y Event Listeners en JavaScript

Los eventos son acciones que suceden en el navegador, como hacer clic en un botón, mover el mouse o presionar una tecla. JavaScript nos permite responder a estos eventos y ejecutar funciones específicas cuando ocurren. Utilizamos event listeners para "escuchar" estos eventos y tomar acciones en respuesta. Aquí te mostraré cómo trabajar con eventos y event listeners en JavaScript.

Event Listeners

Un event listener es una función que espera un evento específico en un elemento HTML y ejecuta una función cuando ocurre ese evento. Puedes agregar event listeners a elementos DOM usando JavaScript.

const boton = document.getElementById('miBoton');

boton.addEventListener('click', function() {

    alert('Se hizo clic en el botón.');

});

En este ejemplo, estamos agregando un event listener al botón con el ID "miBoton" que mostrará una alerta cuando se haga clic en el botón.

Tipos Comunes de Eventos

• click: Se activa cuando se hace clic en un elemento.

• mouseover: Se activa cuando el puntero del mouse se coloca sobre un elemento.

• keydown: Se activa cuando una tecla del teclado es presionada.

• submit: Se activa cuando se envía un formulario.

Event Object

Cuando un evento ocurre, se pasa un objeto de evento al event listener que contiene información sobre el evento, como la tecla presionada o la posición del mouse.

const miElemento = document.getElementById('miElemento');

miElemento.addEventListener('click', function(event) {

    console.log('Evento tipo:', event.type);

    console.log('X:', event.clientX);

    console.log('Y:', event.clientY);

});

Event Bubbling y Event Capturing

JavaScript tiene dos fases de propagación de eventos: event bubbling (burbujeo) y event capturing (captura). Event bubbling es la propagación desde el elemento objetivo hasta el elemento raíz, y event capturing es la propagación desde el elemento raíz hasta el elemento objetivo.

const miElemento = document.getElementById('miElemento');

miElemento.addEventListener('click', function() {

    console.log('Evento bubbling: Hola desde miElemento.');

}, false);  // false para event bubbling, true para event capturing

Eliminación de Event Listeners

Puedes eliminar event listeners si ya no son necesarios.

const boton = document.getElementById('miBoton');

const miFuncion = () => alert('Se hizo clic en el botón.');

boton.addEventListener('click', miFuncion);

boton.removeEventListener('click', miFuncion);

Uso de Eventos en HTML

También puedes usar eventos directamente en HTML usando atributos de evento, como `onclick`, `onmouseover`, etc.

<button onclick="miFuncion()">Haz clic</button>

<script>

function miFuncion() {

    alert('Se hizo clic en el botón.');

}

</script>

Estos son los conceptos básicos para trabajar con eventos y event listeners en JavaScript. Utiliza event listeners para responder a las interacciones del usuario en tu página web y crear experiencias interactivas. ¡Practica y experimenta para mejorar tus habilidades en JavaScript!