Buscar:Buscar

Ejemplo de fujo de eventos: addEventListener con su tercer parámetro establecido a true

Este ejemplo no funciona en Internet Explorer, por motivos que veremos de vuelta al curso.

En este documento he establecido tres escuchas, una para body, una para el div que contiene un botón, y otra para el propio botón. Todas ellas lanzan una función que devuelve una alerta con el elemento que ha recibido el evento:

    function alerta(){
        alert(this);
    }
    
    window.onload = function (){
        var elBody = document.getElementsByTagName('body')[0];
        var elDiv = document.getElementById('elDiv');
        var elButton = document.getElementById('elButton');
        elBody.addEventListener('click',alerta,true);
        elDiv.addEventListener('click',alerta,true);
        elButton.addEventListener('click',alerta,true);
    }
        

Si se hace clic sobre el botón:

se obtienen tres respuestas, [object HTMLBodyElement], [object HTMLDivElement] y [object HTMLButtonElement]. El flujo de eventos, por tanto, ha sido el normal, y el orden de respuesta ha dependido de la captura.

Volver al curso