前端事件流(vue)

前端事件流指的是在用户与网页进行交互时，浏览器中的各种事件是如何触发和传递的过程。

通常，事件流分为三个阶段：

1. 捕获阶段：事件从最外层的父元素开始逐层向下传递，直到事件触发的目标元素。

2. 目标阶段：事件到达目标元素，触发该元素上的事件处理程序。

3. 冒泡阶段：事件从目标元素开始向上冒泡，传递到父元素，直到达到最外层的父元素。

在事件流的传递过程中，可以通过阻止事件的默认行为或阻止事件的传播来控制事件的触发。在 JavaScript 中，可以通过事件对象来访问和控制事件的属性和方法，如事件类型、触发目标、当前时间等。

在 Vue 中，事件流主要分为三个阶段：捕获阶段、目标阶段和冒泡阶段，这三个阶段的触发顺序和 HTML 中的事件流相同。

1. 捕获阶段：事件从最外层的祖先元素开始向下传播，直到到达事件的目标元素。在这个过程中，如果在某个祖先元素上绑定了事件处理函数，则会依次触发它们。

2. 目标阶段：当事件到达目标元素时，会触发目标元素上绑定的事件处理函数。

3. 冒泡阶段：事件从目标元素开始向上传播，依次触发祖先元素上绑定的事件处理函数，直到到达最外层的祖先元素。

在 Vue 中，我们可以通过在事件处理函数中调用 event.stopPropagation() 方法来阻止事件继续传播，或者在元素上添加 .capture 修饰符来指定事件在捕获阶段触发，例如：

<template>
  <div class="parent" @click.capture="handleParentClick">
    <div class="child" @click="handleChildClick"></div>
  </div>
</template>

...
methods: {
  handleParentClick() {
    console.log('parent clicked');
  },
  handleChildClick() {
    console.log('child clicked');
  }
}

在这个例子中，如果点击了子元素，则会先触发父元素的点击事件处理函数，再触发子元素的点击事件处理函数。如果我们将父元素的事件绑定改为 @click="handleParentClick"，则会先触发子元素的事件处理函数，再触发父元素的事件处理函数。