Vue事件修饰符的使用

Z时代
2024-01-10
分类：综合

vue

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：

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

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

.prevent: 等同于JavaScript中的 event.preventDefault( ) ，防止执行默认事件（例如：submit 按钮的提交事件）（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

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

.once: 只会触发一次

.stop 防止事件冒泡
冒泡事件：事件流顺序为从内到外。
JS 默认带有冒泡事件机制。使用 .stop 修饰符，可以阻止事件的冒泡机制。
嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外子节点-》父节点的点击事件
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <meta charset="utf-8">
  <title> </title>
  <style>
  </style>
</head>
<body>
<div id="app">
  <div class="outer" @click="outer">
    <div class="middle" @click="middle">
      <button @click.stop="inner">点击我(^_^)</button>
    </div>
  </div>
  <p></p>
</div>
<script type="text/javascript">
  let app = new Vue({
    el: '#app',
    data () {
      return { message: '测试冒泡事件' } },
    methods: {
      inner: function () {
        console.log( 'inner： 这是最里面的Button')
      },
      middle: function () {
        console.log( 'middle: 这是中间的Div')
      },
      outer: function () {
        console.log( 'outer: 这是外面的Div')
      }
    }
  })
</script>
</body>
</html>
不使用.stop 修饰符，点击内部元素，会触发外部元素的点击事件
在（最内层的）子元素加上.stop 修饰符后，阻止了冒泡事件

.capture 捕获事件

设置事件流顺序为捕获顺序（从外到内）。JS 默认事件流为冒泡事件。使用 .capture 修饰符可以使事件流变为捕获事件。

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

PS: JS 默认的事件流机制为事件冒泡。所以默认情况下一般不会出现捕获事件。但是，可以使用事件监听器 .addEventListener( ) 监听一个元素的事件，并且设置事件触发时调用的函数，以及，设置事件流为冒泡或者捕获。

参见：JS .addEventListener( ) 事件监听器 https://mp.csdn.net/postlist/list/all?undefined=all&keyword=listen

.self

只触发当前元素绑定的事件。阻止其他元素导致的冒泡事件和捕获事件在当前元素上发生。但不影响冒泡事件和捕获事件继续扩散

例子：

不加任何修饰符时：JS 默认事件冒泡机制（从内到外），即点击子元素，父元素和爷爷元素的点击事件也被触发
//子元素、父元素、爷爷元素都绑定了点击事件。监听当点击事件在该元素触发
<div id="app">
  <div class="outer" @click="outer">最外层
    <div class="middle" @click="middle">中间
      <div class="inner" @click="inner">最内层点击我(^_^)</div>
    </div>
  </div>
  <p></p>
</div>
<script type="text/javascript">
  let app = new Vue({
    el: '#app',
    data () {
      return { message: '测试冒泡事件' } },
    methods: {
      inner: function (e) {
        console.log( 'inner： 这是最里面的Button'+e.currentTarget)
      },
      middle: function (e) {
        console.log( 'middle: 这是中间的Div'+e.currentTarget)
      },
      outer: function (e) {
        console.log( 'outer: 这是外面的Div'+e.currentTarget)
      }
    }
  })
</script>
使用 .self 修饰符后。只有绑定在当前元素触发的点击事件触发时，才运行函数；冒泡或者捕获事件触发的函数，都被阻止。但不阻止冒泡事件和捕获事件向其他元素继续扩散
也就是说，比如我在 middle 这个父元素的点击事件使用了 .self 修饰符，只有当我点击 middle 这个元素时，才能触发middle 的点击事件。但是不会阻止冒泡事件往外层继续扩散。
而我点击子元素 inner ，产生的冒泡事件，在父元素 middle 元素上不会被触发。而爷爷元素 outer 元素还是被触发了。（因为冒泡事件只在middle 不被触发，但是没有阻止，所以继续往外层扩散）
给父元素 middle 元素的点击事件添加 .self 修饰符：
 <div class="outer" @click="outer">最外层
    <div class="middle" @click.self="middle">中间
      <div class="inner" @click="inner">最内层点击我(^_^)</div>
    </div></div>

.once 事件只执行一次

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

键盘修饰符

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许 v-on 在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

.enter：回车键

.tab：制表键

.delete：含delete和backspace键

.esc：返回键

.space: 空格键

.up：向上键

.down：向下键

.left：向左键

.right：向右键

鼠标修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：

.left：鼠标左键

.middle：鼠标中间滚轮

.right：鼠标右键

修饰键

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应：

.ctrl

.alt

.shift

.meta

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名。例如，由于预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法，出现alert。

<!-- HTML -->
<div id="app">
    <input type="text" v-on:keydown.f5="prompt()">
</div>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5！');
        }
    }
});

以上是 Vue事件修饰符的使用的全部内容，来源链接： utcz.com/z/376113.html

Vue事件修饰符的使用

.stop 防止事件冒泡

在（最内层的）子元素加上.stop 修饰符后，阻止了冒泡事件