Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 4 minutos Intermedio
javascript-add-event-handlers

Como añadir event handlers en JavaScript

Para reaccionar a eventos en JavaScript, antes debemos asociarle un manejador del eventos que se ejecutará cuando ocurra al suceso.

Es decir, debemos definir una función, que queremos que se desencadene cuando pasa al evento. Y, de alguna forma, tenemos que asociar esta la función con el evento.

Esto se puede hacer de varias maneras:

MétodoFlexibilidadSeparación de lógica
Atributo inline ❌BajaMala
Propiedad elemento ❌Media (sobrescribe otros)Media
Método addEventListener 💚AltaAlta

La recomendara es `addEventListener“. Pero Vamos a ver cada uno de ellas,

Atributo inline en HTML

Una de las formas más simples de añadir un evento es directamente en el HTML utilizando el atributo onclick o cualquier otro atributo de evento.

Este método se utiliza principalmente para eventos como click, mouseover, keydown, etc.

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

En este ejemplo, la función miFuncion se ejecutará cuando el usuario haga clic en el botón.

Desventajas:

  • Dificultad para separar la lógica de JavaScript del marcado HTML.

Propiedad del elemento

Otra forma es asignar una función directamente a la propiedad del evento de un elemento DOM.

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

boton.onclick = function () {
    alert("Botón clickeado");
};

Desventajas:

  • No permite agregar múltiples manejadores para el mismo evento.

Método addEventListener

El método más moderno y flexible para asociar funciones a eventos es addEventListener. Este método permite agregar múltiples funciones al mismo evento.

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

boton.addEventListener("click", function () {
    alert("Botón clickeado con addEventListener");
});

Usar addEventListener siempre que sea posible.

El método addEventListener

El método addEventListener es el enfoque moderno y preferido para añadir eventos a los elementos del DOM.

Este método tiene varias ventajas, como permitir añadir múltiples manejadores de eventos a un solo elemento, y también podemos eliminar el manejador de evento posteriormente.

Su uso es el siguiente,

elemento.addEventListener('tipoEvento', funcionManejadora, [opciones]);
  • elemento: El elemento HTML al que se añadirá el manejador de eventos.
  • tipoEvento: El tipo de evento a escuchar (por ejemplo, 'click', 'submit', 'keydown').
  • funcionManejadora: La función que se ejecutará cuando ocurra el evento.
  • opciones (opcional): Un objeto que puede especificar si el evento debe ser capturado durante la fase de captura o burbujeo.

Remover un Manejador de Eventos

Para eliminar un manejador de eventos, utiliza removeEventListener. Debes pasar exactamente el mismo tipo de evento y la misma función que se usaron para agregar el manejador.

function manejarClick() {
  alert('¡Botón clickeado!');
}

boton.addEventListener('click', manejarClick);
boton.removeEventListener('click', manejarClick);

En este caso, manejarClick se eliminará y ya no se ejecutará en futuros clics.

Tipos de funciones asociadas a eventos

Al asociar una función a un evento, puedes optar por funciones anónimas, funciones definidas previamente o incluso funciones flecha.

Una función anónima se define directamente en el lugar donde se asigna el manejador de eventos. Es útil para manejar eventos simples.

boton.addEventListener('click', function() {
    console.log('Botón clickeado!');
});

Una función nombrada es una función que tiene un nombre y puede ser definida por separado. Esto es útil para manejar eventos más complejos y cuando se necesita reutilizar el manejador de eventos.

function manejarClick() {
    console.log('Botón clickeado!');
}

boton.addEventListener('click', manejarClick);

Las funciones flecha proporcionan una sintaxis más concisa y no tienen su propio contexto de this, lo que puede ser útil en ciertos casos.

boton.addEventListener('click', () => {
    console.log('Botón clickeado!');
});

Delegación de Eventos

La delegación de eventos es una técnica avanzada que permite manejar eventos en elementos hijos utilizando un único manejador en un elemento padre.

Esto es útil cuando se tienen elementos generados dinámicamente o una gran cantidad de elementos similares.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Delegación de Eventos</title>
</head>
<body>
    <ul id="miLista">
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
    </ul>

    <script>
        document.getElementById('miLista').addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert('Elemento de lista clickeado: ' + event.target.textContent);
            }
        });
    </script>
</body>
</html>

En este ejemplo,

  • El manejador de eventos se asigna al ul
  • Responde a clics en cualquier li dentro de él.

En esta página