Interactividad con addEventListener

El método addEventListener es una forma flexible de manejar eventos en JavaScript. Permite agregar múltiples controladores de eventos a un solo elemento sin sobrescribir los controladores anteriores. A diferencia del atributo onclick, que solo permite un manejador por evento, addEventListener puede gestionar múltiples funciones para el mismo evento.

Sintaxis:  element.addEventListener(event, function, useCapture);

• element: El elemento del DOM al que se le va a asignar el evento.
• event: El tipo de evento que queremos escuchar (como 'click', 'mouseover', etc.).
• function: La función que se ejecutará cuando se dispare el evento.
• useCapture: Un booleano opcional que indica si el evento debe capturarse en la fase de captura o propagación (la mayoría de las veces es false).

Visualización en el navegador

Este es un párrafo cuyas propiedades cambiarán (color, fondo, padding y margin) cuando hagas clic en el botón.

CODE

<script>

    // Seleccionamos los elementos del DOM
    const parrafo = document.getElementById("parrafo");
    const boton = document.getElementById("boton");

    // Función para cambiar el color del párrafo
    function cambiarColor() {
        parrafo.style.color = "blue";
        parrafo.style.background = "yellow";
        parrafo.style.padding = "1em";
        parrafo.style.margin = "1em";
        alert("El color del párrafo ha sido cambiado a azul.");
        
    }
    // Agregamos el EventListener al botón para que escuche el evento 'click'
    boton.addEventListener("click", cambiarColor);
    
</script>