Evento en JavaScript con addEventListener() - Código Ejemplo

Introducción a addEventListener() en eventos de JavaScript

La programación en JavaScript es fundamentalmente acerca de la interactividad de la página web. Los eventos de usuario desencadenan acciones que permiten que nuestra página reaccione al usuario. El addEventListener() de JavaScript es una función que nos ayuda a manejar eventos en nuestra página web.

En esencia, el addEventListener() es una función que espera algún tipo de acción del usuario, conocida como un evento, y luego realiza una función en respuesta. Este patrón es común en la programación de eventos en línea. Los eventos de usuario incluyen hacer clic en un botón, recorrer con el mouse o escribir en un cuadro de texto.

Una ventaja de la función addEventListener() es que nos permite definir varias funciones para la misma acción. Esto significa que podemos ejecutar múltiples acciones cuando un evento ocurre en nuestra página web. La siguiente es la sintaxis que permite utilizar addEventListener():

element.addEventListener(event, function, useCapture);

Un element es cualquier objeto en HTML: una etiqueta HTML, un fragmento de código embebido en un script. Event es el evento que estamos registrando para activar la función, y function es la acción que será ejecutada en respuesta al evento. useCapture es un valor opcional que usamos para indicar si queremos capturar el aspecto burbujeante o delegación del evento.

addEventListener() es una técnica muy útil para añadir interactividad a la página web. Esta técnica permite que nuestras páginas web se sientan más dinámicas y en tiempo real. Además, sigue siendo una técnica muy popular para manejar el comportamiento de la página web en eventos de usuario, a pesar de otras evoluciones, como el uso de frameworks como React o Vue.

El addEventListener() de JavaScript ofrece la posibilidad de manejar eventos de usuario y permite que interactuemos con nuestra página web de manera más dinámica y atractiva. Saber cómo utilizar esta función es clave para el manejo de eventos de usuario de nuestra página web. Cuando se trata de añadir interactividad a nuestras páginas web, el addEventListener() es una técnica básica que debemos conocer como programadores JavaScript.

Cómo agregar addEventListener() a un elemento HTML

Cómo agregar addEventListener() a un elemento HTML

Cuando trabajas con JavaScript en la programación de interactividad en la web, es importante comprender cómo manejar los eventos de usuario en los elementos HTML. La función addEventListener() es una manera de hacer esto.

Con addEventListener(), podemos indicar al navegador que escuche un evento particular en un elemento HTML y luego ejecutar una función en respuesta a ese evento. Podemos usarlo para manejar eventos como clics del mouse, cambios de valor en un campo de entrada o desplazamientos de página.

Aquí hay un ejemplo simple de cómo agregar addEventListener() a un botón HTML:

const boton = document.querySelector("#miBoton");
boton.addEventListener("click", () => {
    alert("¡Has hecho clic en el botón!");
});

En este código, estamos seleccionando el elemento de botón HTML con el identificador #miBoton usando el método querySelector() y luego agregando un eventListener() para escuchar el evento de clic del mouse. Cuando se produce ese evento, se ejecuta la función de flecha que muestra una alerta en la pantalla.

Es importante destacar que el segundo argumento de addEventListener() es una función que se ejecutará en respuesta al evento. Podemos crear una función personalizada para manejar cualquier acción que necesitemos en respuesta al evento.

La función addEventListener() también tiene un tercer argumento opcional que especifica si el evento debe ser capturado durante la fase de acenso, que comienza desde el elemento más interno capturando el evento hasta llegar al más externo, o durante la fase de descenso, que comienza en el elemento más externo y desciende hacia los elementos más internos. Por defecto, este tercer argumento está en false, lo que significa que el evento se captura durante la fase de descenso.

Con addEventListener() podemos agregar interactividad a nuestros elementos HTML y manejar eventos de usuario usando funciones personalizadas. Es una herramienta poderosa en la programación de interactividad en la web y es importante comprender cómo utilizarla para crear experiencias de usuario atractivas y dinámicas.

<button id="miBoton">Haz clic aquí</button>

Usando addEventListener() para cambiar propiedades de un elemento en respuesta a un evento

Cuando se trata de crear interactividad en una página web, los eventos de usuario son una herramienta esencial. En JavaScript, podemos usar la función addEventListener() para suscribir una función a un evento específico.

Por ejemplo, imagina que tienes un botón en tu página que quieres que cambie su color de fondo cuando un usuario hace clic en él. Podemos lograr eso suscribiendo una función al evento click del botón usando addEventListener().

Aquí está un ejemplo de código que muestra cómo hacerlo:

const boton = document.getElementById("mi-boton"); // obtiene el botón por su ID
boton.addEventListener("click", function () {
    // suscribe una función al evento `click`
    boton.style.backgroundColor = "red"; // cambia el color de fondo del botón a rojo
});

En este ejemplo, la función que hemos suscrito al evento click cambia el color de fondo del botón a rojo. La propiedad style permite cambiar propiedades CSS de un elemento HTML, y nos referimos al botón como boton.style. Así que boton.style.backgroundColor cambia el color de fondo.

Este es solo un ejemplo simple, pero usando addEventListener() podemos hacer cosas mucho más interesantes y complejas. También podemos usar eventos de usuario como mouseover, keydown, y submit para activar nuestras funciones.

La programación de eventos y de funciones con addEventListener() es una habilidad importante para cualquier desarrollador web, y es esencial para crear interactividad en una página. Si estás interesado en aprender más sobre eventos de usuario y cómo usar addEventListener(), busca en línea por tutoriales y ejemplos de código para comenzar a practicar.