Vue2基础 04：事件处理

Fxcrisp

已于 2024-07-05 14:07:56 修改

阅读量911

点赞数 30

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

于 2024-05-18 21:18:02 首次发布

本文链接：https://blog.csdn.net/Fxcrisp/article/details/139031538

版权

Vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

事件处理

1 事件的基本使用
- 1.1 事件绑定一：点击按钮，调用函数
- 1.2 事件绑定二：点击按钮，返回给函数一个值
2 事件修饰符
3 键盘事件

1 事件的基本使用

1.1 事件绑定一：点击按钮，调用函数

<button v-on:click="showInfo">点击提示信息</button>
//简写为
<button @click="showInfo">点击提示信息</button>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx'
        },
        methods:{
            showInfo(event){
                //alert('提示跳出')
                console.log(event.target)
                //拿到发生事件的目标，在这为拿到按钮<button>点击提示信息</button>
                console.log(event.target.innerText)//拿到里面的文字--点击提示信息
                console.log(this)//this为该vue实例对象
            }
        }
    })
</script>

v-on指令用于监听DOM事件，并在触发事件时执行相应的方法或逻辑。
showInfo在控制台输出时，会有鼠标事件MouseEvent，即括号里的event。

1.2 事件绑定二：点击按钮，返回给函数一个值

<button @click="showInfo(66)">点击提示信息</button>
//即 传参则加(),不传可以不加
//若需要event事件，则写为showInfo(66,$event)加入关键词，实例属性为showInfo(number,event)
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx'
        },
        methods:{
            showInfo(number){
                 console.log(number)
            }
        }
    })
</script>

methods中的属性没有数据代理，一旦写完就等待被调，不会像data一样被修改/删除

2 事件修饰符

prevent：阻止默认事件——例：阻止页面跳转

<a href="http://www.4399.com" @click.prevent="showInfo">点击提示信息</a>
//prevent即为事件修饰符

<script type="text/javascript">
    new Vue({
        methods:{
            showInfo(e){
                e.preventDefault()
                //阻止默认行为 
                //若click不加修饰符，也可这么写
            }
        }
    })
</script>

stop：阻止事件冒泡

事件冒泡

<head>
    <script type="text/javascript">
    <style>
        *{
            margin-top: 20px;
        }//通配符，让所有元素之间有个间距
        .demo{
            height: 50px;
            background-color: skybule;
        }
    </style>
    </script>
</head>
<body>
    <div id="root">
        <div class="demo" @click="showInfo">
            <button @click.stop="showInfo">点击提示信息</button>
            //添加stop修饰符，阻止外面一层
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        //...省略
        methods:{
            showInfo(e){
                e.stopPropagation()
                //若不加stop修饰符，也可这么写阻止冒泡api
                alert('提示跳出')
            }
        }
    })
</script>

点的是按钮，冒泡冒到了div，使得弹窗出现了两次

once：事件只触发一次

<button @click.once="showInfo">点击提示信息</button>
//添加once修饰符，只触发一次弹窗

capture：使用事件的捕获模式（不常用）

JS的事件流分为捕获阶段和冒泡阶段

<head>
    <script type="text/javascript">
    <style>
        .box1{
            padding: 5px;
            background-color: skybule;
        }
        .box2{
            padding: 5px;
            background-color: pink;
        }
    </style>
    </script>
</head>

<body>
    <div class="box1"  @click.capture="showMsg(1)">//添加修饰符
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        //...省略
        methods:{
            showMsg(msg){
                console.log(msg)
            }
        }
    })
</script>

捕获阶段是由外向内的，冒泡阶段是由内向外的
默认冒泡阶段处理事件

未加修饰符前，点击div2，先经过捕获阶段，然后再经过事件冒泡，顺序为div2-->div1
加修饰符后，在捕获阶段开始处理事件，顺序为div1-->div2

self：只有event.target是当前操作的元素才触发事件（不常用）

<div class="demo" @click.self="showInfo">
    <button @click="showInfo">点击提示信息</button>
</div>
<script type="text/javascript">
    new Vue({
        methods:{
            showInfo(e){
                console.log(e.target)
                //发生事件的目标---button，因为div其实是button冒泡冒上去的，被点击的是按钮
            }
        }
    })
</script>

未加修饰符self前，控制台输出两个<button>点击提示信息</button>
添加修饰符self后，控制台输出一个<button>点击提示信息</button>

passive：事件的默认行为立即执行，无需等待事件回调执行完毕（不常用）

<head>
    <script type="text/javascript">
    <style>
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;//自动滚动
        }
        li{
            height: 100px;
        }
    </style>
    </script>
</head>

<body>
    <ul @scroll.passive="demo" class="list">//无序列表
    //scroll--给滚动条加的滚动事件
    //wheel--仅限鼠标滚轮触发
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

<script type="text/javascript">
    new Vue({
        //...省略
        methods:{
            demo(){
                for(let i = 0; i<100000;i++){
                    console.log('#')
                }
                console.log('累坏了')
            }
        }
    })
</script>

当滚动事件为wheel：
未加修饰符passive前，要先等控制台输出完，再进行ul的滚动
添加修饰符passive后，控制台输出与ul滚动同步进行
scroll：加不加都时同步的

passive在移动端的项目用的多

3 键盘事件

键盘事件主要有两个
keydown：按下即触发
keyup：按下再松手后触发，一般用这个

<input type="text" placeholder="按下回车提示输入" @keyup.enter="shouInfo">

<script type="text/javascript">
    new Vue({
        //...省略
        methods:{
            shouInfo(e){
                if(e.keyCode !== 13) return
                //若keyup不加回车别名‘.enter’，则这么写
                console.log(e.key,e.keyCode)
                //key为按键名称，keycode为按键编码
                console.log(e.target.value)
            }
        }
    })
</script>

常用按键别名:

按键	别名
回车	`enter`
删除	`delete` （捕获“删除”和“退格”键）
退出	`esc`
空格	`space`
换行	`tab` （只能用于`keydown`）
上	`up`
下	`down`
左	`left`
右	`right`

提示：

1、无别名的按键，写原始名称(key值)，不推荐写按键编码
2、由两个单词组成的写为aaa-bbb，比如 CapsLock需写成caps-lock
3、 5个系统修饰键比较特殊：ctrl alt shift meta/win
(1) keyup：按下系统修饰键的同时，再按下其他键后释放，才能被触发，若要规定按下的其他键，可以在后面加上“.xxx”
(2) keydown：正常触发
4、自定按键别名：Vue.config.keyCodes.自定义键名 = 按键编码（不太推荐）