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.