Vue事件

在Vue中事件处理是非常重要的一点，都只要Vue中的事件处理一般都放在methods属性中，其实这些事件也可以放在data中，但是这样就违背了Vue轻量的原则了

获取点击属性

<body>
<div id="app">
    <button @click="getEven">获取点击事件</button>
</div>
</body>
<script type="text/javascript">
   Vue.config.productionTip = false
   var vm=new Vue({
   el:'#app',
   data:{},
   methods:{
       getEven(even){
           console.log(even)
       }
   }
   });
</script>

打印even

从这里可以看，在调用getEven事件的时候并没有传递传参，但even这个参数却存在，这个就是js底层的原理了，这个时候接收的就是鼠标点击的这个事件的参数了。

没有传递参数的时候，这第一个参数就是这个触发事件的系统参数，那么如果添加了参数以后，第一个还是么？这个有点Vue编程经验的的都知道，这种方式是无法获取到的，这种时候，就需要用到Vue事件中的关键字$event了

如下操作
<button @click="getEven2($event,5)">获取点击事件</button>
方法这样定义就可以看到下图的结果了，并且这个$event关键字的顺序并不是固定在第一个，可以随机放，只需要按照对应的顺序取出来就行了。
getEven2(e,res){
    console.log("e",e)
    console.log("res",res)
}

请输入图片描述

事件修饰符

常见的原生修饰符有preventDefault，默认事件的触发
<a href="https://ljy0427.online/TheRivers/" @click="goto">点我去江河三千里</a>
goto(){
    alert("江河三千里")
}
例如这串代码，会在弹出提示框，点击确定之后，就会触发a标签的跳转事件，页面将会跳转到该网址，而这个跳转事件，就是默认事件，是a标签的默认跳转事件，所以如果想要阻止这种默认事件的触发就需要用到preventDefault了。
goto(e){
    e.preventDefault()
    alert("江河三千里")
}
这里这个参数e，就是通过$event关键是获取到的参数，也就是触发事件的参数了
在Vue中，已经封装好了各种事件修饰符了，只需要在html中调用函数的地方加上对应的关键字就可以了。
  1. prevent:阻止默认事件
  2. stop:阻止事件冒泡
  3. once：事件只触发一次
  4. capture：使用事件的捕获方式
  5. self：只有event.target是当前操作元素时才触发事件
  6. passive:事件的默认行为立即执行，无需等待事件回调执行完毕
使用如下,也即是在@click的后面加上.prevent
<a href="https://ljy0427.online/TheRivers/" @click.prevent="goto">点我去江河三千里</a>

解释这些事件,前三个不用解释了，都很常见，从第四个开始

  1. capture：使用事件的捕获方式

    js的事件处理顺序是从捕获到冒泡阶段，同时事件的处理通常都是在冒泡阶段；也即是，从外到里寻找事件的方法，然后从里到外的执行对应的事件
    <div class="pre" @click="capture(1)">
    div1
<div class="sub" @click="capture(2)">
    div2
</div>
</div>
<style>
.pre {
width: 20vw;
height: 15vh;
background-color: skyblue;
}
.sub {
width: 10vw;
height: 10vh;
background-color: beige;
}
</style>

    所以在点击div2之后，会先输出2，再输出1，那么就会有需求了，我就要先输出1，再输出2。这个需要事件处理是在捕获阶段，而不是冒泡阶段了。

    事件的冒泡

     <div class="pre" @click.capture="capture(1)">
  div1
      <div class="sub" @click="capture(2)">
        div2
      </div>
 </div>
    使用这个capture之后，就能将div1的事件处理阶段定义为捕获阶段

  2. self：只有event.target是当前操作元素时才触发事件

    代码上面类似

这种时候可以看到，当点击div2时，只输出2了，父元素的事件没有触发，self可以理解成自身，只有自身被调用的时候才触发

 <div class="pre" @click.self="capture(1)">
div1
<div class="sub" @click="capture(2)">
    div2
</div>
</div>
![只执行自己本身了][4]

  1. passive:事件的默认行为立即执行，无需等待事件回调执行完毕

    事件都存在这默认的行为，可以理解成Java中的构造函数一样，但二者的却别是，Java中的构造函数是在该方法被调用之后就会首先执行的，在js中这种默认行为，将会是在其他事件执行完毕之后才会执行。

就比如存在一个滚动框，如果在滚动条滚动时添加一些处理事件，这种时候，就会先执行该处理事件，执行完毕之后，才会发生滚动条的滚动

>直接上代码
```html
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

发表评论
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

🎲