Vue事件处理

xiaoge00

2020-05-17

1.监听事件（在 v-on 中使用变量）

监听事件用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>监听事件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="counter += 1">共点击了{{ counter }}次</button>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            counter: 0,
        },
    });
</script>

2.事件处理方法（在 v-on 中使用方法名）

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>事件处理方法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- `greet` 是在下面定义的方法名 -->
            <button v-on:click="greet">Greet</button>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: ‘Vue.js‘
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function(event) {
                // `this` 在方法里指向当前 Vue 实例
                alert(‘Hello ‘ + this.name + ‘!‘)
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        },
    });
</script>

3.内联处理器中的方法（在v-on 中使用方法名 + 参数）

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>内联处理器中的方法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="say(‘springboot!‘)">springboot</button>
            <button v-on:click="say(‘vue!‘)">vue</button>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        methods: {
            say: function(message) {
                alert(message)
            }
        },
    });
</script>

4.事件修饰符

在原生DOM绑定事件的年代，我们经常会使用到e.preventDefault() 或 e.stopPropagation()等操作。

document.getElementById(‘menu‘).onclick = function(e) {
  e.preventDefault();
  //...
}

Vue.js 为了简化这种常见需求，为v-on提供了一个叫Event Modifiers (事件修饰符)的语法糖。事件修饰符：

.stop 阻止事件向上冒泡，等价于添加event.stopPropagation() 
.prevent 阻止元素发生默认的行为，等价于添加event.preventDefault() .capture 在捕获阶段触发监听函数 
.self 只当 event.target === event.currentTarget 时触发处理函数 
.once 事件将只会触发一次 
.passive 表示 listener 永远不会调用 preventDefault()

W3C的DOM标准中，一次事件包含三个步骤：捕获 -> 到达目标 -> 冒泡

当点击Inner标签时，事件传播顺序是 Outer -> Middle -> Inner -> Inner -> Middle -> Outer。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>事件修饰符</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        main {
            background: #AC2925;
            padding: 20px;
        }

        section {
            background: #C0A16B;
            padding: 20px;
        }

        a {
            background: #BCE8F1;
            padding: 20px;
        }
    </style>
    <body>
        <div id="app">
            <main v-on:click="listener($event, ‘Outer‘)">
                Outer
                <section v-on:click="listener($event, ‘Middle‘)">
                    Middle
                    <a v-on:click="listener($event, ‘Inner‘)"> Inner </a>
                </section>
            </main>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            listener: function(e, msg) {
                const current = e.currentTarget.nodeName
                console.log(`${current} ${msg}`)
            },
        },
    });
</script>