JavaScript 事件和Vue的事件处理

JavaScript 事件和Vue的事件处理

JavaScript 事件

关键字

事件传递模型：捕获型与冒泡模型。事件顺序有两种类型：事件捕捉和事件冒泡。

DOM事件流：事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件

冒泡型事件(Event Bubbling)：事件由叶子节点沿祖先结点一直向上传递直到根节点(最先收到的是叶子节点)

捕获型事件(Event Capturing)：它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素

如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

事件传递

为一个超链接添加了click事件监听器，那么当该链接被点击时该事件监听器就会被执行。但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发该事件监听器。这是因为事件不仅仅对触发的目标元素产生影响，它们还会对沿着DOM结构的所有元素产生影响。这就是大家所熟悉的事件转送。

事件转送模式

（1）.在事件捕捉（Capturing）阶段，事件将沿着DOM树向下转送，目标节点的每一个祖先节点，直至目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。

在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。

(2). 在目标（target）阶段，浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行 该事件监听器。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。

（3）.在冒泡（Bubbling）阶段，事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。

并非所有的事件都会经过冒泡阶段的

所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。

停止事件冒泡和阻止事件的默认行为

1.停止事件冒泡

停止事件冒泡是指，停止冒泡型事件的进一步传递（取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件，我们还可以停止支持DOM标准浏览器的捕捉型事件，用topPropagation()方法）。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

2.阻止事件的默认行为

停止事件的默认行为是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。例如，如果表单中input type 属性是 “submit”，点击后在事件传播完浏览器就自动提交表单。又例如，input 元素的 keydown 事件发生并处理后，浏览器默认会将用户键入的字符自动追加到 input 元素的值中。

 

Vue事件处理

参考：https://www.cnblogs.com/xuqp/p/9406971.html

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

• .capture：与事件冒泡的方向相反，事件捕获由外到内

• .self：只会触发自己范围内的事件，不包含子元素

• .once：只会触发一次

测试代码

<template>
  <div id="app">
    <div class="outeer" @click.self="outer">
      <div class="middle" @click.stop="middle">
        <button @click.self="inner">点击我(^_^)</button>
      </div>
    </div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import child from "./emitTestChild";
export default {
  name: "ParentComponents",
  components: {
    child
  },
  data() {
    return { message: "测试冒泡事件" };
  },
  methods: {
    inner: function() {
      this.message = "inner： 这是最里面的Button";
      console.log('里面');
    },
    middle: function() {
      this.message = "middle: 这是中间的Div";
      console.log('中间');
    },
    outer: function() {
      this.message = "outer: 这是外面的Div";
      console.log('外面');
    }
  }
};
</script>

在不加任何修饰符，执行顺序为：里面->中间->外面

.stop

在点击上加上.stop相当于在每个方法中调用了等同于event.stopPropagation()，点击子节点不会捕获到父节点的事件

 <div class="outeer" @click="outer">
      <div class="middle" @click="middle">
        <button @click.stop="inner">点击我(^_^)</button>
      </div>
    </div>
</div>

执行之后为：里面

.prevent取消默认事件

.prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。比如我们页面的<a href="#">标签，当用户点击时，通常在浏览器的网址列出#：

.capture 捕获事件

捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内 父节点-》子节点的点击事件

 <div class="outeer" @click.capture="outer">
      <div class="middle" @click="middle">
        <button @click="inner">点击我(^_^)</button>
      </div>
    </div>
</div>

执行之后为:里面->外面->中间

.once 只执行一次点击

如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。

.self

修饰符.self只会触发自己范围内的事件，不会包含子元素。理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行,无视stop。

<div class="outeer" @click.self="outer">
      外面
      <div class="middle" @click.self="middle">
        中间
        <button @click.stop="inner">点击我(^_^)</button>
      </div>
    </div>
</div>   

点击"中间"，打印的是：中间