八、事件处理————温开水的复习笔记

咕噜一口温开水

已于 2022-02-03 10:26:14 修改

阅读量299

点赞数

分类专栏： Vue 文章标签： javascript 前端 html5

于 2022-02-03 10:25:23 首次发布

本文链接：https://blog.csdn.net/qq_47286790/article/details/122761678

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

前言

这次的笔记比较杂

一、Vue中事件的基本使用

（一）回顾原生JavaScript中的事件使用

三要素
        获取事件源（哪个对象被触发）
        绑定事件，事件类型（怎么触发，点击还是键盘输入等等）
        添加事件处理程序（要运行什么）

这样使用事件比较复杂，待会儿看看Vue的事件使用。

JavaScript事件_咕噜一口温开水的博客-CSDN博客https://blog.csdn.net/qq_47286790/article/details/122761706?spm=1001.2014.3001.5501

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <button id="btn">点我提示信息</button>
    </div>
</body>
    <script>
        //一、获取事件源
        let btn = document.getElementById('btn');
        //二、绑定事件
        console.log(btn);
        btn.onclick = function(){
            alert('我的名字叫温开水');//三、添加事件处理代码
        }
    </script>
</html>

（二）Vue中的事件使用

主要是 v-on:click="shoeInfo" 和 配置项methods

修饰符可以连续写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <!--  引入vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>我的名字叫{{name}}</h2>
        <button v-on:click="showInfo">点我提示信息</button>
    </div>
</body>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'温开水'
            },
            methods:{
                showInfo(){
                    alert("你好啊!");
                }
            }
        })
    </script>
</html>

事件的基本使用
1）使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
2）事件的回调需要配置在methods对象中，最终会在vm上；
3）methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5）@click="demo"和@click="demo($event)" 效果一致，但后者可以传参；

二、Vue中的事件修饰符

Vue中的事件修饰符
1）prevent：阻止默认事件(常用)
2）stop：阻止事件冒泡(常用)
3）once：事件只触发一次(常用)
4）capture：使用事件的捕获模式
5）self：只有event.target是当前操作的元素时才触发事件
6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <!--  引入vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: pink;
        }
        .box1{
            padding: 5px;
            background-color: pink;
        }
        .box2{
            padding: 5px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>我的名字叫{{name}}</h2>
        <!-- 阻止默认事件的发生 -->
        <a href="https://blog.csdn.net" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!-- 事件只触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>
</body>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'温开水'
            },
            methods:{
                showInfo(e){
                    alert("你好啊!");
                },
                showMsg(num){
                    alert(num);
                }
            }
                
        })
    </script>
</html>

三、Vue键盘事件

（1）Vue中常用的按健别名
        回车=> enter
        删除=> delete ( 捕获删除”和“退格"键)
        退出=> esc
        空格=> space
        换行=> tab（特殊，必须配合keydown使用）
        上=>up
        下=>down
        左=> left
        右=> right
（2）Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
（3）系统修饰键(用法特殊) : ctrl、 alt、 shift、 meta
        ①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        ②配合keydown使用：正常触发事件。
（4）也可以使用keyCode去指定具体的按键(不推荐)
（5）Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名（不推荐）