14

Quando quero adicionar um listener de algum evento em Javascript uso o addEventListener.

document.addEventListener('click', function (e) {
      alert('clicked');
})

Porém percebi que, em alguns códigos, usa-se um terceiro parâmetro, que creio ser um Boolean. Mais ou menos assim:

document.addEventListener('click', function (e) {
      alert('clicked');
}, false)

Li a documentação do Mozilla para ver do que se tratava, mas acabei ficando mais confuso com a explicação.

Alguém podem me esclarecer com alguma exemplo para que serve esse terceiro parâmetro de addEventListener?

3
  • Wallace: A resposta era o que procuravas?
    – Sergio
    5/09/2016 às 17:05
  • @Sergio eu costumo demorar um pouquinho para marcar elas. Obrigado por me lembrar (sem querer abusar, acho que sempre precisará me avisar) 5/09/2016 às 17:37
  • Fazes bem em esperar, neste caso fiquei só curioso se faltava algo.
    – Sergio
    5/09/2016 às 17:38

2 Respostas 2

22

O terceiro parâmetro chama-se capture e define se o addEventListener deve responder a eventos que descem no DOM, ou sobem no DOM.

Basicamente o evento percorre dois caminhos quando acontece. Se clicares num elemento por exemplo, primeiro serão chamados os addEventListener que tiverem true no terceiro argumento, de cima para baixo no DOM. Depois serão chamados os addEventListener que tiverem false (ou nada) no terceiro argumento, de baixo para cima no DOM. O evento percorre sempre dois caminhos (se não for parado). Começa no document desce de elemento em elemento até encontrar o alvo, e depois percorre o mesmo caminho de volta.

Essas duas fases são chamadas capture phase e bubling phase, respetivamente fase de captura e fase de ascenção. O sitio onde muda é o event.target, ou seja quando a phase de captura encontrar o elemento que originou o evento. O que distingue em que fase o addEventListener é accionado é esse terceiro argumento capture.

Um exemplo prático seria:

function logCaptura(e) {
    console.log(this.tagName, 'fase de captura');
}

function logBubble(e) {
    console.log(this.tagName, 'fase de bubling');
}


document.querySelector('section').addEventListener('click', logCaptura, true);
document.querySelector('div').addEventListener('click', logCaptura, true);
document.querySelector('button').addEventListener('click', logCaptura, true);

document.querySelector('section').addEventListener('click', logBubble);
document.querySelector('div').addEventListener('click', logBubble);
document.querySelector('button').addEventListener('click', logBubble);
<section>
    <div>
        <button type="button">Clica-me!</button>
    </div>
</section>

Os auscultadores de eventos são disparados de cima para baixo no DOM e depois de baixo para cima. E neste exemplo é irrelevante a ordem em que forem adicionados.

Esse argumento é útil para termos a certeza que apanhamos um evento "em primeira mão" e a tempo de impedir a sua propagação no DOM. Repara na diferênça nesta versão com um e.stopPropagation();: https://jsfiddle.net/kqLkdk3c/

Neste caso do exemplos auscultadores de eventos sem o capture true não chegam sequer a ser chamados.

Mais informação na MDN.

2
  • 3
    +1. Gostei da explicação. 29/08/2016 às 12:31
  • 2
    É sempre bom auscultar suas explicações :)
    – bfavaretto
    30/08/2016 às 0:08
0

Só para complementar com um exemplo prático e didático, o parâmetro do método addEventListener é opcional e recebe um valor booleano que no caso for false (ou não conter os parâmetros) os eventos ocorreram na ordem do elemento filho para o elemento pai, ou seja, fase bubling:

document.getElementById('btn').addEventListener('click', () => {
  alert('Primeiro o clique do botão');
}, false);

document.getElementById('div').addEventListener('click', () => {
  alert('Depois da div');
}, false);
div {
  background-color: yellow;
  padding: 10px;
}

button {
  padding: 10px;
}
<div id="div">
  <h2>Bubbling (dentro para fora)</h2>
  <button id="btn">Botão</button>
</div>

Caso o parâmetro seja true os eventos ocorreram na ordem do elemento pai para o elemento filho, ou seja, fase capturing:

document.getElementById('btn').addEventListener('click', () => {
  alert('Depois do botão');
}, true);

document.getElementById('div').addEventListener('click', () => {
  alert('Primeiro o clique da div');
}, true);
div {
  background-color: yellow;
  padding: 10px;
}

button {
  padding: 10px;
}
<div id="div">
  <h2>Capturing (fora para dentro)</h2>
  <button id="btn">Botão</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .