what is capture mode on an event listener

Question

In the vue docs under Event Modifiers, there's an example of a modifier called capture which states the following:

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

I've done some searching, but haven't found a clear answer as to how this modifies the event binding, then I thought to myself 'You know who always has the answer? Stack Overflow'

Answer 1

So right after posting I stumbled on this article which illustrates it clearly. Let's say for this example that you have three elements nested within each other:

<div class="outer">     <div class="middle">         <div class="inner"></div>     </div> </div> 

When a click event occurs, there are two phases: the first is called capturing, the second is called bubbling. When you click on the .inner, the event traverses down from the outermost container element .outer, to .middle, then to .inner in the capturing phase, then from .inner to .middle, then to .outer in the bubbling phase.

If capture is set on .inner for a click event handler:

<div class="outer">     <div class="middle">         <div class="inner" v-on:click.capture="doThis"></div>     </div> </div> 

and you click on it, it will call doThis(...) three times, the first from .outer, the second from .middle, and the third from .inner.

If capture is set on .middle for a click event handler

<div class="outer">     <div class="middle" v-on:click.capture="doThis">         <div class="inner"></div>     </div> </div> 

and you click on it, it will call doThis(...) two times, the first from .outer and the second from .middle

Answer 2

Both bubble and capture event handlers on an element will be triggered only once, the difference is when they are triggered (before the children or after the children). Capture mode means the handler is triggered before any handlers on child elements. Bubble mode (the default), means the handler is triggered after all child elements have finished their handlers. You can even put a capture mode and bubble mode event handler by doing <div v-on:click="doThis" v-on:click.capture="doThis">

This JS fiddle demonstrates how a single click to a nested inner element first triggers capture handlers in an "outer-to-inner" order, and then triggers bubble handlers in an "inner-to-outer" order.