事件冒泡与事件捕获

在一个事件触发时, 首先会经过捕获阶段, 然后是冒泡阶段.

捕获阶段是从document到目标元素的, 冒泡阶段是从目标元素到document.

因此我们在监听父元素的点击事件或者别的什么事件时, 即使我们点击了子元素或者触发了子元素的别的事件, 也可以成功监听到事件.

如果我们不需要事件继续走的话, 在vue中可以使用stop修饰符停止冒泡, 略微提高一点微不足道的性能. 或者在函数中加上event.stopPropagation(), 这样一个事件就只会被一个元素/监听器处理.

这个event里有target和currentTarget, target永远指向触发事件的元素, 比如

<template>
  <div @click="(e) => { console.log(e.target) }">
    <p>123</p>
  </div>
</template>

没意外的话, 点击p标签会打印出p标签出来. 而currentTarget表示现在正在处理事件的元素, 这里的话就是这个div标签.

<template>
  <div @click="console.log(3)">
    <div @click="console.log(2)">
      <div @click="console.log(1)">
        aaaaaaa
      </div>
    </div>
  </div>
</template>

这份代码点击aaaaaa后, 会依次打印出1, 2, 3. 如果把其中一个改成.capture的话, 那就不同了.

<template>
  <div @click="console.log(3)">
    <div @click.capture="console.log(2)">
      <div @click="console.log(1)">
        aaaaaaa
      </div>
    </div>
  </div>
</template>

这里.capture表示在捕获阶段执行, 因此会打印出2, 1, 3.