Conceptos de DHTML

El DOM permite capturar los eventos producidos en dos órdenes distintos. Si al tercer parámetro del método addEventListener le pasamos un valor false, luego el evento se captura primero por el objeto que produjo el evento y luego es capturado por todos los otros objetos superiores que capturan dicho evento (es el valor por defecto cuando no indicamos el tercer parámetro).

En caso de pasar el valor true, el evento es capturado por objetos que pertenecen a niveles superiores del DOM para luego ser capturado por el objeto que disparó el evento.

En el ejemplo que desarrollaremos dispondremos una serie de div, unos contenidos en otros y veremos las dos formas de capturar los eventos:

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <h1>Presione con el mouse en el recuadro interior y en el recuadro exterior.</h1>
    <h3>Si disponemos false en el tercer parámetro de la función addEventListener</h3>
    <div id="div1e" class="recuadroexterior">
        Este es contenido del recuadro exterior.
        <div id="div1i" class="recuadrointerior">
            Este es contenido del recuadro interior.
        </div>
        También es contenido del recuadro exterior.
    </div>
    <h3>Si disponemos true en el tercer parámetro de la función addEventListener</h3>
    <div id="div2e" class="recuadroexterior">
        Este es contenido del recuadro exterior.
        <div id="div2i" class="recuadrointerior">
            Este es contenido del recuadro interior.
        </div>
        También es contenido del recuadro exterior.
    </div>
    <script src="funciones.js"></script>
</body>

</html>

estilos.css

.recuadrointerior {
    font-family: Courier;
    font-size: 12px;
    background-color: #ffffcc;
    border-width: 1px;
    border-style: dotted;
    border-color: #ffaa00;
    padding: 20px;
}

.recuadroexterior {
    font-family: Courier;
    font-size: 12px;
    background-color: #ff9900;
    border-width: 1px;
    border-style: dotted;
    border-color: #ffaa00;
    padding: 20px;
}

funciones.js

document.getElementById('div1i').addEventListener('click', presionRecuadroInte)
document.getElementById('div1e').addEventListener('click', presionRecuadroExte)
document.getElementById('div2i').addEventListener('click', presionRecuadroInte, true)
document.getElementById('div2e').addEventListener('click', presionRecuadroExte, true)

function presionRecuadroInte() {
    alert('se presionó el recuadro interior')
}

function presionRecuadroExte() {
    alert('se presionó el recuadro exterior')
}

Primero registramos el evento click para los dos primeros div (como lo venimos haciendo siempre):

document.getElementById('div1i').addEventListener('click', presionRecuadroInte)
document.getElementById('div1e').addEventListener('click', presionRecuadroExte)

Luego:

document.getElementById('div2i').addEventListener('click', presionRecuadroInte, true)
document.getElementById('div2e').addEventListener('click', presionRecuadroExte, true)

Si pasamos como parámetro a la función addEventListener el valor true significará que si presionamos el botón del mouse dentro del div interior primero se dispara el evento del div exterior y por último se dispara el evento click del div interior.

48 - Burbujeo y captura de eventos (DOM)

Retornar