Vue中事件修饰符与键盘事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中事件修饰符与键盘事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

事件修饰符

prevent:阻止默认事件

stop:阻止事件冒泡

once：事件只触发一次

capture：使用事件的捕获模式

self:与当前事件一致时触发

passive：事件的默认行为立即执行

键盘事件

事件修饰符

Vue中的事件修饰符：

1、prevent:阻止默认事件；

2、stop:阻止事件冒泡；

3、once：事件只触发一次；

4、capture：使用事件的捕获模式；

5、self：只有event.target是当前操作的元素时才触发事件；（只有和当前事件触发的标签一致时才会触发）

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕

prevent:阻止默认事件

点完之后不会发生默认事件

 <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

<div id="root">
<!--    .prevent阻止默认行为-->
    <a :href="url" @click.prevent="show">点击去百度</a>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            url:"http://baidu.com"
        }
    }
</script>

点完超链接不会发生跳转，因为prevent阻止了a标签的默认事件（跳转）

stop:阻止事件冒泡

div和button都有show事件，当点击按钮时，button会触发show，执行完成后，冒泡到外层，div的show也会触发

<!--    .stop阻止事件冒泡-->
    <div @click="show">
        <button @click.stop="show">小按钮</button>
    </div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        methods:{
          show(e){
              console.log(e.target)
             alert("hello")
          }
    }
<script>

加上了stop,阻止了button的冒泡，所以div不会触发show事件。

once：事件只触发一次

<div id="root">
    <!--  .once只执行一次-->
    <button @click.once="show">一次按钮</button>
<div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            url:"http://baidu.com"
        },
        methods:{
          show(e){
              console.log(e.target)
             alert("hello")
          }
   }
</script>

Vue中事件修饰符与键盘事件

默认是点一次触发一次事件，但是加上了once后只会触发一次，（页面加载完后点击n次只触发第一次）

capture：使用事件的捕获模式

<head>
    <meta charset="UTF-8">
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <style>
        *{
            margin-top: 5px;
        }
         .div1{
             padding: 5px;
             background-color: deepskyblue;
         }

        .div2{
            padding: 5px;
            background-color: orange;
        }
    </style>

</head>



<div id="root">

<!--    .capture 使用捕获模式，捕获是从外向内，冒泡是从内向外-->
    <div class="div1" @click.capture="div1">
        div1
        <div class="div2" @click="div2">
            div2
        </div >

    </div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        methods:{
            div1(){
              console.log(1)
            },
            div2(){
                console.log(2)
            }
</script>

正常情况下是先进行事件的捕获，这个过程是有外到内的，捕获完成后，该事件触发，在冒泡到外层。

没加capture时，点击div2,会打印出2 1，这个是冒泡产生的结果

Vue中事件修饰符与键盘事件

加上capture后

Vue中事件修饰符与键盘事件

self:与当前事件一致时触发

.self event.target是当前的对象时才会触发只有和他一样的标签时才会触发
冒泡冒上去的还是button对象，而不会变成div

<div id="root"> 
 <!--  .self  event.target是当前的对象时才会触发 只有和他一样的标签时才会触发-->
    <!--   冒泡冒上去的还是button对象，而不会变成div-->
    <div @click.self="show">
        <button @click="show">self按钮</button>
    </div>
</div>

上面的加上.self，show事件只会触发一次，层的div不会被触发。

passive：事件的默认行为立即执行

passive立即执行，不会等到回调函数执行完毕才执行，默认情况是回调函数执行完后才会执行事件的行为。

    <style>
     ul{
            background-color: gold;
            height: 200px;
            width: 200px;
            /*位置不够时，自动滚动*/
            overflow: auto;
        }
        li{
            height: 100px;
           width:100px;
        }
    </style>

<div id="root">
<!--scroll只要发生了滑动就会执行，滚条鼠标和上下键 当到达底部继续滑动不会继续执行-->
<!--    wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行-->
<!-- .passive无须等待回调函数执行完毕，立即执行这个属性，这里为滑动，则立即滑动-->
    <ul @wheel.passive="flow">
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ul>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            url:"http://baidu.com"
        },
        methods:{
            flow(){
              for( i=0;i<10000;i++) {
                  console.log("滑动..")
              }
            }
        }

    });

scroll只要发生了滑动就会执行，滚条鼠标和上下键当到达底部继续滑动不会继续执行
wheel属性只有当鼠标滑动才会执行当到达底部继续滑动鼠标还会继续执行
.passive无须等待回调函数执行完毕，立即执行这个属性，这里为滑动，则立即滑动

单独的scroll也有passive效果

Vue中事件修饰符与键盘事件

键盘事件

1、Vue中常见的按键别名：

回车--enter
删除--delete(捕获删除和退格键)
退出---esc
空格--space
换行--tab
上--up
下--down
左--left
右--right

2、Vue未提供的别名按键，可以使用按键原始的值去绑定，但注意要为kebab-case(短线命名，如大小写切换的按键CapsLock,要绑定就为caps-lock)

3、系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)

配合keyup使用时：按下这个修饰键的同时，在按下其他键，随后释放其他键，事件才别触发
配合keydown使用时:按下即生效，正常触发事件

4、也可以使用keyCode指定具体的按键(如:@keydown.13="xxx")，但是不推荐，因为有些键盘的keyCode值不一值

5、Vue.config.keyCodes.自定义键名=键码

<div id="root">
<input type="text"  placeholder="输入并回车" @keydown.kc="kdown" >
</div>

<script type="text/javascript">
    Vue.config.keyCodes.kc=13//给回车定义了一个别名kc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

</head>

<div id="root">
<input type="text"  placeholder="输入并回车" @keydown.enter="kdown" @keydown="keydown">
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {},
        methods:{
            kdown(e){
                console.log(e.target.value)
            },
            keydown(e){
         //打印键的名和键的值
                console.log(e.key,e.keyCode)
            }

        }

    });
    console.log(vm)

</script>
</html>

Vue中事件修饰符与键盘事件