Vue-事件

最新推荐文章于 2024-04-07 08:07:50 发布

H5_ljy

最新推荐文章于 2024-04-07 08:07:50 发布

阅读量593

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56973906/article/details/126607344

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

事件监听(事件绑定)
事件修饰符
按键修饰符

事件监听(事件绑定)

在Vue中使用v-on:监听事件,语法糖为@
函数有两种写法函数名后面可写可不写(),写了小括号可以传参,不传参时两种写法效果都一样。单个参数不传参打印时为事件对象。

事件触发方法时的参数传递：可以传递普通参数，也可以传递事件对象$event,设置参数不传参时

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.12/vue.js"></script>
</head>

<body>
    <div id="app">
    <button v-on:click="fn">点我打印666</button><br>  
    <button v-on:click="fn2(999)">点我打印999</button><br>
    <button @click="fn2(888)">点我打印888</button><br>
    <button @click="fn3">点我打印msg</button><br>
    <button @click="fn2">点我打印事件对象</button><br>
    </div>
    <script>
        let obj = {
            el: '#app',
            data: {
                msg: "ljy666",
               },
            methods: {
                fn(){
                    console.log(666)
                },
                fn2(el){
                    console.log(el)
                },
                fn3(){
                    console.log(this.msg)
                },
            },
        }
        var vue = new Vue(obj)
    </script>

事件修饰符

Vue认为方法应只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。所以引入了事件修饰符来处理DOM事件。

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

script代码

    <script>
        let obj = {
            el: '#app',
            data: {
                msg: "ljy666",
               },
            methods: {
                fn(){
                    console.log(666)
                },
                fn2(el){
                    console.log(el)
                },
                fn3(){
                    console.log(this.msg)
                },
            },
        }
        var vue = new Vue(obj)
    </script>

当我们没有绑定stop时，点击元素时，点击事件会从这个元素的嵌套层级一级一级往上冒泡；
当绑定了stop时，就阻止了从当前元素经过的所有冒泡行为

    <div id="app">
        <div @click="fn" id="div1"><p>点我打印666</p>
        <div @click="fn2(999)" id="div2"><p>点我打印999</p>
            <div @click.stop="fn3" id="div3"><p>点我打印msg</p></div>
        </div>
        </div>
    </div>

在这里插入图片描述
可以看到点击了紫色区域，只执行了当前元素的点击事件

.prevent 阻止默认事件
有些标签会自带事件，比如a标签点击时会跳转页面，此时给事件绑定prevent就不会执行默认事件

<a href="http://www.baidu.com" @click.prevent="fn">点我</a>

.capture 添加事件侦听器时让事件在捕获阶段触发
补充：事件执行顺序是捕获=>目标=>冒泡
事件默认是在冒泡阶段触发的,当在捕获阶段触发意味着我们点击它的子元素时,设置为捕获阶段触发的父元素会最先执行它的点击事件

<div id="app">
        <div @click.capture="fn" id="div1"><p>点我打印666</p>
        <div @click="fn2(999)" id="div2"><p>点我打印999</p>
            <div @click="fn3" id="div3"><p>点我打印ljy666</p></div>
        </div>
        </div>
    </div>

在这里插入图片描述

.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,
只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,
但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素

 <div id="app">
        <div @click.self="fn" id="div1"><p>点我打印666</p>
        <div @click="fn2(999)" id="div2"><p>点我打印999</p>
            <div @click="fn3" id="div3"><p>点我打印ljy666</p></div>
        </div>
        </div>
    </div>

在这里插入图片描述

.once 事件只触发一次,触发完之后,事件就解绑

<div id="app">
        <div @click="fn" id="div1"><p>点我打印666</p>
        <div @click="fn2(999)" id="div2"><p>点我打印999</p>
            <div @click.once="fn3" id="div3"><p>点我打印ljy666</p></div>
        </div>
        </div>
    </div>

在这里插入图片描述
重复点击div3时只打印了一次

多修饰符一起使用:连点

    <div id="app">
        <div @click="fn" id="div1"><p>点我打印666</p>
        <div @click.self.stop="fn2(999)" id="div2"><p>点我打印999</p>
            <div @click="fn3" id="div3"><p>点我打印ljy666</p></div>
        </div>
        </div>
    </div>

在这里插入图片描述
可以看见点击div2时只冒泡了它的事件,点击div3时只冒泡了div3和div2

按键修饰符

Vue的按键修饰符使用v-on:event.xxx，其中event为按键事件，xxx为键码或键码别名，如v-on:keydown.13或v-on:keydown.enter就表示：当按下回车键时才触发keydown方法。

<input type="text" @keydown.enter="fn()">//方式一
<input type="text" @keydown.13="fn()">//方式二

Vue2.x为我们内置了一些常用的键码别名：

 .enter：回车键
 .tab：制表键
 .delete：含delete和backspace键
 .esc：返回键
 .space: 空格键
 .up：向上键
 .down：向下键
 .left：向左键
 .right：向右键

除了上面提到的按键别名，还可以用如下修饰键开启鼠标或键盘事件监听，使在按键按下时发生响应。

.ctrl
.alt
.shift
.meta

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。
换一种说法(组合键)：如果要引发 keyup.alt，必须按下 alt时释放其他的按键；单单释放 alt不会引发事件。

       <input type="text" @keyup.alt.67="fn"> //当我们按住alt在按C时执行fn函数
       <div @click.ctrl="fn3" id="div3"></div>//当我们按住ctrl再点击执行fn3函数

H5_ljy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录