07-事件处理

已于 2023-03-23 22:57:26 修改
阅读量274 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2023-03-16 23:44:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43472934/article/details/129600075
版权

1.事件的基本使用

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的基本使用</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

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

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}</h2>
        <!-- <button v-on:click="showInfo">点我</button> -->
        <button @click="showInfo">点我</button>
        <button @click="showInfo2(66,$event)">点我2</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(event){
                    console.log(event.target);
                    console.log(event.target.innerText);//点我
                    console.log(this); //此处的this是vm
                    alert('你好');
                },
                showInfo2(number,event){
                    console.log(number);
                    console.log(event.target);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

2.事件修饰符

2.1 默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>

    <!-- 
        Vue中的事件修饰符：
            1.prevent:阻止默认事件（常用）
            2.stop:阻止事件冒泡（常用）
            3.once:事件只触发一次（常用）
            4.capture:使用事件的捕获模式
            5.self:只有event.target是当前操作的元素才触发事件
            6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕
     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <a href="https://www.baidu.com" @click="showInfo">百度一下</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

上述代码执行我们点击“百度一下”时，会发现先弹出框，当点击框中的确认按钮后，会自动跳转到百度网站去，这是因为a标签的默认行为href导致的。

场景：链接标签a我设置了点击事件，我想实现只运行点击事件，而不跳转它默认的行为href

2.1.1 使用event的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <a href="https://www.baidu.com" @click="showInfo">百度一下</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

2.1.2 使用vue的事件修饰符：prevent:阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

2.2 冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <div class="demo1" @click="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

当点击“点我提示信息”时，弹出框确认一次后，还会在弹出框一次，是因为“点我提示信息”按钮在蓝色div里，两个都有点击事件，点击“点我提示信息”按钮从而触发了蓝色div的点击事件，这就是冒泡事件。

2.2.1 使用event的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <div class="demo1" @click="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

2.2.2 使用vue的事件修饰符：stop:阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

2.3 once:事件只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                }
            }
        })
    </script>
</body>
</html>

2.4 捕获事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

点击橙色div2区域，控制台输出顺序：

在这里插入图片描述

点击div2的时候，它先经过的阶段是事件捕获，随后才是冒泡阶段，默认情况下，冒泡事件阶段才是处理事件的，捕获阶段是div1->div2，而冒泡阶段是div2->div1

场景：不想冒泡事件阶段处理事件，想捕获阶段处理事件

2.4.1 capture:使用事件的捕获模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                }
            }
        })
    </script>
</body>
</html>

2.5 event事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素才触发事件 -->
        <div class="demo1" @click="showInfo">
            <button @click="showInfo">测试event.target</button>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    console.log(e.target);
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

点击“测试event.target”按钮会发现出现了两次的
在这里插入图片描述

2.5.1 self:只有event.target是当前操作的元素才触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素才触发事件
        	这里self给的是div元素，只有@click的event是div才会触发点击事件，所以在这里只会弹框一次
		 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">测试event.target</button>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    console.log(e.target);
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

这里self给的是div元素，只有@click的event是div才会触发点击事件，所以在这里只会弹框一次，且只打印了一次

2.6 滚动事件

2.6.1 使用@scroll：给滚动条加的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">测试event.target</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    console.log(e.target);
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    console.log('@scroll是给滚动条添加的滚动事件');
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.6.2 使用@wheel：给鼠标滚轮加的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">测试event.target</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    console.log(e.target);
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    console.log('@scroll是给滚动条添加的滚动事件');
                }
            }
        })
    </script>
</body>
</html>

2.6.3 @scroll和@wheel区别

@scroll：是给滚动条加的事件

  1. 鼠标滚轮将滚动条滚到最下方或者最上方就不会触发@scroll事件
  2. 用左边点击滚动条使其滑动是会触发@scroll事件
  3. 鼠标滚轮只要可以在滚动条行走，则会触发@scroll事件
  4. 使用down，up上下键也会触发@scroll事件

@wheel：是给鼠标滚轮加的事件

  1. 用左边点击滚动条使其滑动是不会触发@wheel事件
  2. 鼠标滚轮就算将滚动条划到最下方或者最上方，只要鼠标进行了滚轮，就还是会触发@wheel事件
  3. 使用down，up上下键不会触发@wheel事件

2.6.4 passive引出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">测试event.target</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    console.log(e.target);
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    // console.log('@scroll是给滚动条添加的滚动事件');
                    for(let i = 0;i <100000;i++){
                        console.log('#');
                    }
                    console.log('累坏了');
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

在ul容器里使用鼠标滚轮滚动使其滚动条滚动时，会发现使用鼠标滚轮滚动时，会触发@wheel事件的demo函数，demo函数进行了for循环，循环十万次，然后等了几秒后，滚动条才动。它的执行顺序是从鼠标滚轮滚动->demo->滚动条滚动

场景：想让顺序：鼠标滚轮滚动->滚动条滚动（demo异步）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px; 
           background-color: skyblue;
        }
        .box1{
           padding: 5px;
           background-color: skyblue;
        }
        .box2{
           padding: 5px;
           background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent:阻止默认事件（常用） -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- stop:阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">事件只触发一次（常用）</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">测试event.target</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京'
            },
            methods:{
                showInfo(e){
                    // e.stopPropagation() //取消冒泡事件
                    // e.preventDefault() //取消掉a标签的默认行为：跳转到href指定的url
                    console.log(e.target);
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    // console.log('@scroll是给滚动条添加的滚动事件');
                    for(let i = 0;i <100000;i++){
                        console.log('#');
                    }
                    console.log('累坏了');
                }
            }
        })
    </script>
</body>
</html>

2.7 修饰符可以连续写

在这里插入图片描述

3.键盘事件

场景：回车将输入框按下的值输出在控制台

3.1 原始实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'清华大学'
            },
            methods:{
                showInfo(e){
                    // console.log(e.keyCode); //得到按键的编码，如回车键是13
                    // console.log(e.target.value); //得到按键按的是什么？按a得到是a

                    //场景：不想每次按键抬起就输出按键的值，想回车就输出按键的值
                    if(e.keyCode !== 13) return;
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>
</html>

3.2 vue的按键修饰符enter

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'清华大学'
            },
            methods:{
                showInfo(e){
                    // console.log(e.keyCode); //得到按键的编码，如回车键是13
                    // console.log(e.target.value); //得到按键按的是什么？按a得到是a

                    //场景：不想每次按键抬起就输出按键的值，想回车就输出按键的值
                    // if(e.keyCode !== 13) return;
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>
</html>

3.3 vue的按键其他修饰符

Vue中常用的按键别名：
回车 => enter
删除 => delete （捕获“删除”和“退格”键）
退出 => esc
空格 => tab
换行 => tab
上 => up
下 => down
左 => left
右 => right

3.4 Vue未提供别名的按键

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

其实@keyup.enter=“showInfo” 等价于 @keyup.Enter=“showInfo”；这个大写的Enter其实是回车键的名称

console.log(e.key);//得到按键的名称，如回车键是Enter

从这里可以知道，我们想通过Vue未提供别名的按键，可以使用这样使用@keyup.键的名称=“方法名”
但是这个键的名字如果是含有两个大写组成的词语，则需要转换成短横线命名法。如：切换成大小写的键叫：CapsLock，则是：@keyup.caps-lock="showInfo"这样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        1.Vue中常用的按键别名：
            回车 => enter
            删除 => delete （捕获“删除”和“退格”键）
            退出 => esc
            空格 => tab
            换行 => tab
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
        3.系统修饰符（用法特殊）：ctrl、alt、shift、mete
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'清华大学'
            },
            methods:{
                showInfo(e){
                    // console.log(e.keyCode); //得到按键的编码，如回车键是13
                    console.log(e.target.value); //得到按键按的是什么？按a得到是a

                    //场景：不想每次按键抬起就输出按键的值，想回车就输出按键的值
                    // if(e.keyCode !== 13) return;
                    // console.log(e.target.value);
                    // console.log(e.key);//得到按键的名称，如回车键是Enter
                }
            }
        })
    </script>
</body>
</html>

3.5 Vue可以使用keyCode来指定具体的按键（不推荐）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        1.Vue中常用的按键别名：
            回车 => enter
            删除 => delete （捕获“删除”和“退格”键）
            退出 => esc
            空格 => tab （特殊，必须配合keydown去使用）
            换行 => tab
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
        3.系统修饰符（用法特殊）：ctrl、alt、shift、mete（window图标键）
            
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'清华大学'
            },
            methods:{
                showInfo(e){
                    // console.log(e.keyCode); //得到按键的编码，如回车键是13
                    console.log(e.target.value); //得到按键按的是什么？按a得到是a

                    //场景：不想每次按键抬起就输出按键的值，想回车就输出按键的值
                    // if(e.keyCode !== 13) return;
                    // console.log(e.target.value);
                    // console.log(e.key);//得到按键的名称，如回车键是Enter
                }
            }
        })
    </script>
</body>
</html>

3.6 Vue自定义键名

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        1.Vue中常用的按键别名：
            回车 => enter
            删除 => delete （捕获“删除”和“退格”键）
            退出 => esc
            空格 => tab （特殊，必须配合keydown去使用）
            换行 => tab
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
        3.系统修饰键（用法特殊）：ctrl、alt、shift、mete（window图标键）
            (1).配合keyup使用：按下修饰键的同时，再按下其他的键，随后释放其他键，事件才被触发。
            (2).配合keydown使用：正常触发事件。

        4.也可以使用keyCode去指定具体的按键（不推荐）
        5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
            
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13;  //定义了一个别名按键名：huiche 可以触发enter键

        const vm = new Vue({
            el:'#root',
            data:{
                name:'清华大学'
            },
            methods:{
                showInfo(e){
                    // console.log(e.keyCode); //得到按键的编码，如回车键是13
                    console.log(e.target.value); //得到按键按的是什么？按a得到是a

                    //场景：不想每次按键抬起就输出按键的值，想回车就输出按键的值
                    // if(e.keyCode !== 13) return;
                    // console.log(e.target.value);
                    // console.log(e.key);//得到按键的名称，如回车键是Enter
                }
            }
        })
    </script>
</body>
</html>

3.7 修饰键可以连续写

需求：在keyup的基础上，只有按下ctrl+y才可以触发，其他的ctrl+其他键不可以触发

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        1.Vue中常用的按键别名：
            回车 => enter
            删除 => delete （捕获“删除”和“退格”键）
            退出 => esc
            空格 => tab （特殊，必须配合keydown去使用）
            换行 => tab
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
        3.系统修饰键（用法特殊）：ctrl、alt、shift、mete（window图标键）
            (1).配合keyup使用：按下修饰键的同时，再按下其他的键，随后释放其他键，事件才被触发。
            (2).配合keydown使用：正常触发事件。

        4.也可以使用keyCode去指定具体的按键（不推荐）
        5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
            
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13;  //定义了一个别名按键名：huiche 可以触发enter键

        const vm = new Vue({
            el:'#root',
            data:{
                name:'清华大学'
            },
            methods:{
                showInfo(e){
                    // console.log(e.keyCode); //得到按键的编码，如回车键是13
                    console.log(e.target.value); //得到按键按的是什么？按a得到是a

                    //场景：不想每次按键抬起就输出按键的值，想回车就输出按键的值
                    // if(e.keyCode !== 13) return;
                    // console.log(e.target.value);
                    // console.log(e.key);//得到按键的名称，如回车键是Enter
                }
            }
        })
    </script>
</body>
</html>

4.总结

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值