Vue事件处理详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109750800

本文介绍了Vue框架中的事件处理机制，包括事件的三个要素——事件目标、事件处理程序和事件对象。详细讨论了事件流的捕获和冒泡阶段。接着阐述了Vue中事件绑定的三种方式：直接操作变量、调用函数以及传递参数。最后提到了Vue的事件修饰符，它允许开发者更方便地处理DOM事件，使得事件处理函数专注于数据逻辑，避免直接操作DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件三要素：

事件目标，事件处理程序，事件对象

事件流：

默认情况下，先进行事件捕获（从外到内读取），然后进行事件冒泡（从内向外执行）

事件绑定：

1）直接操作变量

<body>
    <div id="app">
        {{num}}
        <button v-on:click='num++'>num</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'lisi',
                num:0
            },
            methods:{}
        })
    </script>
</body>

2）调用一个函数

<body>
    <div id="app">
        {{num}}
        <button v-on:click='handler'>num</button>
    </div>
    <script>
        // app实例对象能够获取和操作 data/methods中的实例变量
        var app=new Vue({
            el:'#app',
            data:{
                name:'lisi',
                num:0
            },
            methods:{
                handler(){
                    // this-->当前vue实例对象
                    this.num++;
                    // alert("hello")
                }
            }
        });
        console.log(app.name);
        console.log(app.handler);
    </script>
</body>

3）传递参数

常量

<body>
    <div id="app">
        {{num}}
        <button v-on:click='handler(10)'>num</button>
    </div>
    <script>
        // app实例对象能够获取和操作 data/methods中的实例变量
        var app=new Vue({
            el:'#app',
            data:{
                name:'lisi',
                num:0
            },
            methods:{
                handler(a){
                    console.log(10);
                    // this-->当前vue实例对象
                    this.num++;
                    // alert("hello")
                }
            }
        });
        console.log(app.name);
        console.log(app.handler);
    
    </script>
</body>

变量：

<body>
    <div id="app">
        {{num}}
        <button v-on:click='handler(a)'>num</button>
    </div>
    <script>
        // app实例对象能够获取和操作 data/methods中的实例变量
        var app=new Vue({
            el:'#app',
            data:{
                name:'lisi',
                num:0,
                a:'hello'
            },
            methods:{
                handler(a){
                    console.log(a);
                    // this-->当前vue实例对象
                    this.num++;
                    // alert("hello")
                }
            }
        });
        console.log(app.name);
        console.log(app.handler);
    </script>
</body>

事件对象：$event:Vue内部属性

<body>
    <div id="app">
        {{num}}
        <button v-on:click='handler(10,$event)'>num</button>
    </div>
    <script>
        // app实例对象能够获取和操作 data/methods中的实例变量
        var app=new Vue({
            el:'#app',
            data:{
                name:'lisi',
                num:0
            },
            methods:{
                handler(a,event){
                    console.log(a);
                    console.log(event);
                    // this-->当前vue实例对象
                    this.num++;
                    // alert("hello")
                }
            }
        });
        console.log(app.name);
        console.log(app.handler);
    </script>
</body>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，通过事件修饰符来完成这些细节。

<body>
    <div id="app">
        <input type="text" v-on:keyup.enter.left='keyup'>
        <form action="1.html" v-on:submit.prevent="submit">
            <h1>签到</h1>
            <input type="number">
            <button>submit</button>
        </form>
         <div id="outer" v-on:click='handler'>
             <div id="center" v-on:click='handler'>
                 <div id="inner" v-on:click.stop='handler' ></div>
             </div>
         </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{},
            methods:{
                handler(event){
                    // event.stopPropagation();阻止事件冒泡
                    alert(event.currentTarget.id);
                },
                submit(event){
                    // event.preventDefault();阻止表单的提交
                    alert();
                },
                keyup(event){
                    // if(event.keyCode==13){
                    //     alert("enter---");
                    // }

                }
            }
        })
    </script>
</body>