Что такое режим захвата прослушивателя событий

В vue docs в разделе Модификаторы событий есть пример модификатора с именем capture, в котором указано следующее:

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

Я сделал несколько поисков, но не нашел четкого ответа, как это изменяет привязку события, тогда я подумал: "Вы знаете, у кого всегда есть ответ? Переполнение стека

Ответ 1

Итак, сразу после публикации я наткнулся на эту статью, которая ясно показывает это. Пусть в этом примере говорят, что у вас есть три элемента, вложенные друг в друга:

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

Когда происходит событие щелчка, есть две фазы: первая называется захват, вторая называется bubbling. Когда вы нажмете на .inner, событие перейдет от внешнего элемента контейнера .outer, до .middle, а затем в .inner в фазе захвата, затем от .inner до .middle, затем .outer в фазе барботажа.

Если захват установлен на .inner для обработчика события клика:

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

и вы нажмете на него, он вызовет doThis(...) три раза, первый из .outer, второй из .middle, а третий из .inner.

Если захват установлен на .middle для обработчика события клика

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

и вы нажмете на него, он вызовет doThis(...) два раза, первый из .outer, а второй из .middle

Ответ 2

И обработчики событий пузыря и захвата на элементе будут срабатывать только один раз, разница в том, когда они срабатывают (до потомков или после потомков). Режим захвата означает, что обработчик запускается перед любыми обработчиками дочерних элементов. Пузырьковый режим (по умолчанию) означает, что обработчик запускается после того, как все дочерние элементы закончили свои обработчики. Вы даже можете установить режим захвата и обработчик пузырькового режима, выполнив <div v-on:click="doThis" v-on:click.capture="doThis">

Это JS fiddle демонстрирует, как одиночный щелчок по вложенному внутреннему элементу сначала запускает захват обработчиков в порядке "внешний-внутренний", а затем запускает пузырьковые обработчики в порядке "внутренний-внешний".