[JavaScript知识库] 7. 事件处理

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 7. 事件处理 -> 正文阅读

[JavaScript知识库]7. 事件处理

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 name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件处理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到 {{name}}</h2>
            <button v-on:click="showInfo1">点击提示信息1</button>
            <button @click="showInfo1">点击提示信息2</button>
            <button @click="showInfo2($event, 66)">点击提示信息3</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data:{
                    name: '上海',
                },
                methods:{
                    showInfo1(){
                        alert("上海欢迎你")
                    },
                    showInfo2(event, number){
                        console.log(event, number)
                        //alert("上海欢迎你们")
                    }
                }
            })
        </script>
    </body>
</html>

2. 事件的修饰符

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件处理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
               margin-top: 15px; 
            }
            .demo1{
                height: 40px;
                background-color: aquamarine;
            }
            .box1{
                padding: 5px;
                background-color: cyan;
            }
            .box2{
                padding: 5px;
                background-color:deeppink;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到 {{name}}</h2>
            <!-- prevent：阻止默认事件（常用） -->
            <a href="http://www.baidu.com" @click.prevent="goBaiDu()">点击跳转到百度</a>

            <!-- stop：阻止事件冒泡（常用） -->
            <div class="demo1" @click="goBaiDu">
                <button @click.stop="goBaiDu">点击跳转到百度</button>
            </div>

            <!-- once：事件只触发一次（常用） -->
            <button @click.once="goBaiDu">点击跳转到百度</button>

            <!-- capture：使用事件的捕获模式 -->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div2 class="box2" @click="showMsg(2)">
                    div2
                </div2>
            </div>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data:{
                    name: '上海',
                },
                methods:{
                    goBaiDu(){
                        alert("上海欢迎您！")
                    },
                    showMsg(msg){
                        alert(msg)
                    }
                }
            })
        </script>
    </body>
</html>