What is the purpose of the third Addeventlistener parameter?

Question

When I want to add one listener of any event in Javascript use the addEventListener.

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

But I realized that, in some codes, a third parameter is used, which I believe is a Boolean. Sort of like this:

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

I read the mozilla documentation to see what it was about, but I ended up getting more confused by the explanation.

Can anyone enlighten me with some example what this third parameter of addEventListener?

Answer 1

The third parameter is called capture and defines whether the addEventListener must respond to events that descend in the DOM, or rise in the DOM.

Basically the event goes through two paths when it happens. If you click on an element for example, first the addEventListener who have true in the third argument, from top to bottom in the DOM. Then the addEventListener who have false (or nothing) in the third argument, bottom to top in the DOM. The event always goes two ways (if not stopped). It starts in the document descends from element to element to find the target, and then goes the same way back.

These two phases are called capture Phase and bubling Phase, respectively capture phase and ascension phase. The place where changes is the event.target, that is when the capture phase finds the element that originated the event. What distinguishes at what stage the addEventListener is triggered is that third argument capture.

A practical example would be:

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>

The event headphones are shot from top to bottom in the DOM and then from bottom to top. And in this example is irrelevant to the order in which they are added.

This argument is useful to make sure we catch an event "first hand" and in time to prevent its spread in the DOM. Notice the difference in this version with a e.stopPropagation();: https://jsfiddle.net/kqLkdk3c/

In this case the event headphones examples without the capture true are not even called.

More information on MDN.

Answer 2

Just to complement with a practical and didactic example, the 3º method parameter addeventlistener is optional and receives a boolean value which in case is false (ou não conter os parâmetros) events occurred in the order of the child element to the parent element, i.e., phase 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>

If the parameter is true events occurred in the parent element order for the child element, i.e., phase 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>