Explicación del método addEventListener en JavaScript

INICIO

El método addEventListener en JavaScript permite registrar un evento a un elemento específico, como un botón, un campo de texto, o cualquier otro componente HTML. Puedes utilizar este método para escuchar una variedad de eventos, como "click", "keydown", "mouseover", entre muchos otros.

La sintaxis básica es: 

element.addEventListener(evento, función);

Donde:

Ejemplos Básicos

Ejemplo 1: Evento click en un botón

Ejemplo 2: Evento mouseover en un div

Pasa el ratón sobre mí

CODE

<body>
    <h1>Explicación del método <code>addEventListener</code> en JavaScript</h1>
    <p>
        El método <code>addEventListener</code> en JavaScript permite registrar un evento a un elemento específico, como un botón, un campo de texto, o cualquier otro componente HTML. 
        Puedes utilizar este método para escuchar una variedad de eventos, como "click", "keydown", "mouseover", entre muchos otros.
    </p>
    <p>
        La sintaxis básica es:
        <pre><code>element.addEventListener(evento, función);</code></pre>
    </p>
    <p>
        Donde:
        <ul>
            <li><strong>evento</strong>: Es el nombre del evento, por ejemplo, "click", "mouseover", "keydown".</li>
            <li><strong>función</strong>: Es la función que se ejecutará cuando ocurra el evento.</li>
        </ul>
    </p>

    <h2>Ejemplos Básicos</h2>

    <div class="box">
        <h3>Ejemplo 1: Evento <code>click</code> en un botón</h3>
        <button id="myButton">Haz clic en mí</button>
        <p id="result1"></p>
    </div>

    <div class="box">
        <h3>Ejemplo 2: Evento <code>mouseover</code> en un div</h3>
        <div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;">
            Pasa el ratón sobre mí
        </div>
        <p id="result2"></p>
    </div>

    <script>
        // Ejemplo 1: Evento click en un botón
        const myButton = document.getElementById("myButton");
        const result1 = document.getElementById("result1");
        myButton.addEventListener("click", function() {
            result1.textContent = "¡Has hecho clic en el botón!";
        });

        // Ejemplo 2: Evento mouseover en un div
        const myDiv = document.getElementById("myDiv");
        const result2 = document.getElementById("result2");
        myDiv.addEventListener("mouseover", function() {
            result2.textContent = "¡Estás pasando el ratón sobre el div!";
        });
    </script>