Vue3 | 事件处理知识 以及 相关修饰符 实战

完整原文地址见简书https://www.jianshu.com/p/dc2f242f0f73

更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录（Updating）》



本文内容提要

  • 简单的事件逻辑，可以直接用表达式 代替 函数 作为 @click的参数

  • MouseEvent对象 了解

  • 事件函数传入参

  • 事件函数传入参 同时获取 原生MouseEvent对象的 写法

  • 一个按钮 同时触发多个 回调函数 的写法

  • Vue的事件传递

  • Vue的默认事件传递是由里而外的【与安卓 自上而下的事件分发机制 恰恰相反】

  • 可以使用.stop修饰符，拦截事件外传

  • @click的.self修饰符

  • @click的.capture修饰符

  • @click的.once/.prevent修饰符

  • @click的鼠标修饰符left、right、middle

  • @click的精确修饰符.exact

  • @scroll.passive的.passive可以提高滚动性能

  • 按键事件指令@keydown

  • @keydown的按键修饰符.enter

  • @keydown的按键修饰符tab、delete、esc、up、down、left、right等


简单的事件逻辑，可以直接用表达式 代替 函数 作为 @click的参数

methods函数型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick() {
                this.counter += 1;
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>



简化表达式型：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='counter += 1'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：


MouseEvent对象 了解

事件响应函数无入参时，默认第一个参数，即是MouseEvent对象：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick(event) {
                console.log(event);
                this.counter += 1;
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

点击打印MouseEvent对象：


其中，event.target是 被点击到的组件：

<script>
...
        methods:{
            handleBtnClick(event) {
                console.log(event.target);
                this.counter += 1;
            }
        },
...
</script>

效果图：


事件函数传入参

案例代码：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick(num) {
                this.counter += num;
                console.log(this.counter);
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick(2)'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

实现内容即，点击按钮时，counter加2：


事件函数传入参 同时获取 原生MouseEvent对象的 写法

即如<button @click='handleBtnClick(2, $event)'>button</button>，
在事件函数调用时候，末尾入参处，加上 入参变量$event：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick(num ,event) {
                this.counter += num;
                console.log(this.counter);
                console.log(event);
                console.log(event.target);
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick(2, $event)'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

点击打印：


一个按钮 同时触发多个 回调函数 的写法

在methods中准备好回调方法，
将要回调的函数名以逗号隔开，作为@click的参数即可：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick1(num ,event) {
                this.counter += num;
                console.log('handleBtnClick1:', this.counter);
                console.log(event);
                console.log(event.target, '<br>');
            },
            handleBtnClick2(num ,event) {
                this.counter += num;
                console.log('handleBtnClick2:', this.counter);
                console.log(event);
                console.log(event.target, '<br>');
            }

        },
        template: `
        <div>
            {{counter}}
            <button 
                @click='handleBtnClick1(2, $event), handleBtnClick2(6, $event)'>
                button
            </button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

运行代码，点击按钮一次，效果：


Vue的事件传递

Vue的默认事件传递是由里而外的【与安卓 自上而下的事件分发机制 恰恰相反】：

如下，我们设置一层div组件，里面套着一个button，
内外两层皆设置点击事件，进行观察：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleDivClick() {
                console.log("handleDivClick");
            },
            handleBtnClick() {
                console.log("handleBtnClick");
            }
        },
        template: `
        <div>
            {{counter}}
            <div @click="handleDivClick">
                <button @click="handleBtnClick">button</button>
            </div>    
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>

运行，点击按钮，日志如下，
验证了 Vue的事件传递是由里而外的：



可以使用.stop修饰符，拦截事件外传：

<script>
...
        template: `
        <div>
            {{counter}}
            <div @click="handleDivClick">
                <button @click.stop="handleBtnClick">button</button>
            </div>    
        </div>`
    });
...
</script>

运行，点击按钮，效果如下，成功拦截：


@click的.self修饰符

修饰在外层DOM组件的@click上，
使得 仅在点击 外层组件本身（如下代码的外层<div>） 或 仅隶属于外层组件的组件（如下代码的{{counter}}）的时候，
才会回调外层组件的回调方法，
而点击内部标签组件元素（如下代码的button）时候，
不会触发外层组件的回调方法：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleDivClick() {
                console.log("handleDivClick");
            },
            handleBtnClick() {
                console.log("handleBtnClick");
            }
        },
        template: `
        <div>
            <div @click.self="handleDivClick">
                {{counter}}
                <button @click="handleBtnClick">button</button>
            </div>    
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>


@click的.capture修饰符

.capture修饰符 使得事件处理顺序变成从外到内:

<script>
    ...
        template: `
        <div>
            <div @click.capture="handleDivClick">
                {{counter}}
                <button @click="handleBtnClick">button</button>
            </div>    
        </div>`
    });
  ...
</script>

运行效果：


@click的.once/.prevent修饰符

.once使得对应事件仅执行一次；
.prevent则用于阻止默认行为；
这两个修饰符在之前的博客中都有涉及过；


@click的鼠标修饰符left、right、middle

左键、右键、中间滚轮


@click的精确修饰符.exact

常规点击修饰符 修饰组件，如：

<script>
    const app = Vue.createApp({
        methods:{
            handleClick() {
                console.log("click");
            }
        },
        template: `
        <div>
            <input @click.ctrl="handleClick"/>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

按住ctrl键 或者 按住ctrl键同时按住其他键，再点击组件，都可以响应回调：


加上.exact之后，只有单独按ctrl键点击组件才响应：

<div @click.ctrl.exact="handleClick">123456</div>


@scroll.passive的.passive可以提高滚动性能


按键事件指令@keydown

常规的按键回调指令是@keydown，
被该指令修饰的组件，只要点击了，就会触发相关的回调方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        methods:{
            handleKeyDown() {
                console.log("keyDown");
            }
        },
        template: `
        <div>
            <input @keydown="handleKeyDown"/> 
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>


@keydown的按键修饰符.enter

当.enter修饰按键事件指令时，对应的组件需要输入回车键，
才会触发按键事件keydown回调：

<script>
    const app = Vue.createApp({
        methods:{
            handleKeyDown() {
                console.log("keyDown");
            }
        },
        template: `
        <div>
            <input @keydown.enter="handleKeyDown"/> 
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：


@keydown的按键修饰符tab、delete、esc、up、down、left、right等

意义同理于以上的.enter，被修饰的对应的组件需要输入对应修饰符的键，
才会触发按键事件keydown回调；

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345