Javascript-Exemplo de Capturing de Eventos

Capturing de eventos é o seguinte : Suponha que você tenha um elemento html que trate um evento. Suponha ainda que existam outras tags containers dele e que também tratem o mesmo evento. Com o Capturing de eventos ao clicar num elemento mais interno o browser irá buscar o elemento container de maior hierarquia e, a partir dele, irá disparar o evento tratado de cima para baixo, dos pais para os filhos, ao contrário do bubbling.

FORM
DIV

P



Ao clicar na tag P será disparado, na sequencia, os eventos da tag form depois a div e depois a p.
Ao clicar na tag div será disparado, na sequencia, os eventos da tag form depois a div.
Ao clicar na tag form será disparado apenas o evento da tag form.
Sendo assim atua exatamente ao contrário do bubbling de eventos.



Código :
        <form id="meuform" style="margin: 10px; border: 1px solid blue;">
            FORM
            <div id="minhadiv" style="margin: 10px; border: 1px solid blue;">
                DIV
                <p id="meup" style="margin: 10px; border: 1px solid blue;">P</p>
            </div>
        </form>

        <script>
            function msg(mens) {
                alert(mens);

            }
            var vform = document.querySelector("#meuform");
            var vdiv = document.querySelector("#minhadiv");
            var vp = document.querySelector("#meup");

            vform.addEventListener("click", function (event) { msg("capture phase: você clicou no form") }, true);
            vdiv.addEventListener("click", function (event) { msg("capture phase: você clicou na div") }, true);
            vp.addEventListener("click", function (event) { msg("capture phase: você clicou no parágrafo") }, true);

        </script>

Infelizmente o capturing de eventos só está disponível através da função addEventListener.
Quando você define, por exemplo, onclick=x() será usado o bubbling de eventos por default.

Existe outro modo de encadeamento de eventos chamado Capturing. Para mais detalhes veja : Bubbling de Eventos