48 - Burbujeo y captura de eventos (DOM)



Problema:Disponer 3 botones, mostrar un mensaje indicando que botón se presionó, además cambiar el color de fondo del documento indistintamente de que botón se presionó.
Primero registrar los eventos indicando en el parámetro capture el valor false, luego probar indicándole el valor true.
Hay algún cambio en cuanto al orden de pintado del fondo y la salida del mensaje de alerta?
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <input type="button" value="Botón 1" id="b1">
    <input type="button" value="Botón 2" id="b2">
    <input type="button" value="Botón 3" id="b3">
    <script src="funciones.js"></script>
</body>

</html>
document.getElementById('b1').addEventListener('click', presionBoton, true)
document.getElementById('b2').addEventListener('click', presionBoton, true)
document.getElementById('b3').addEventListener('click', presionBoton, true)
document.addEventListener('click', presionBotonDocumento)

function presionBoton(e) {
    let ref = e.target
    alert(ref.value)
}

function presionBotonDocumento(e) {
    let ref = document.getElementsByTagName('body')
    ref[0].style.backgroundColor = '#f00'
}
Ver solución


Retornar