I checked MDN too, but I still didn't understand what the useCapture
was for, so this answer is for those who still don't get it after having checked the official documentation.
So first of all, the following happens in almost all browers:
In all browsers, except IE<9, there are two stages of event processing.
The event first goes down - that’s called capturing, and then bubbles up . This behavior is standartized in W3C specification.
which means no matter what you set the useCapture
to, these two event phases always exist.
This picture shows how it works.
According to this model, the event:
Captures down - through 1 -> 2 -> 3.
Bubbles up - through 3 -> 2 -> 1.
Then comes your question. The 3rd param called useCapture
indicates on which of the two phases you want your handler to handle the event.
useCapture = true
The handler is set on the capturing phase. Events will get to it before getting to its children.
useCapture = false
.
The handler is set on the bubbling phase. Events will get to it after getting to its children.
which means that if you write code like this:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
when clicking child element, first
method will be called before second
.
By default, the useCapture
flag is set to false which means you handler will only be called during event bubbling phase.
For detailed info, click this reference link and this.