[前端暴龙机，Vue2.x 进化 Vue3 ] Day12.事件处理

Vue 里面的事件处理，使用的方式会跟一般 JavaScript 的用法相近，下面跟着一起看吧~

事件处理 v-on

使用的方式为

例1.<button v-on:事件名称="">点我</button> 
例2.<button @事件名称="">点我</button> // 缩写方式

事件的缩写方式如上面的例子2，v-on 可替代成 @

可以直接执行 JavaScript 程序码

<div id="app">
   <button v-on:click="count += 1">加1</button>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 1,
        },
        methods:{
   
        }
    })
</script>

一些比较简单的事件处理，可以透过此方式撰写，因为逻辑处理较简单易懂

执行 function

如果事件的逻辑处理较为繁杂，我们会另外写一个 function 去执行，如果事件不需要传参数，那麽要触发的 function 可以不加 ( )

<div id="app">
   <button v-on:click="printCount">加1</button>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 1,
        },
        methods:{
           printCount(){
               this.count += 1;
               console.log(this.count)
           }
        }
    })
</script>

原生 DOM 事件访问

有时候可能需要访问到原始的 DOM 事件，这时可以使用特殊变量 $event 传入

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

事件修饰符

除了 v-model ，事件同样也有修饰符可以使用
.stop

<div id="app">
    <div v-on:click="dodo">
        <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "Vue.js"
        },
        methods: {
            doThis: function () {
                alert("doThis");
            },
            dodo: function () {
                alert("dodo");
            }
        }
    });
</script>

阻止单击事件继续传播(即阻止事件冒泡)，意指点击 button ，只会执行 button 的 doThis() function，不会冒泡去执行 dodo() function

.prevent

<form v-on:submit.prevent="onSubmit"></form>

提交表单事件不再重载页面，原生 event.preventDefault()

.capture

<div v-on:click.capture="doThat" class="box">
    <button v-on:click="doThis">阻止单击事件继续传播</button>
</div>

事件捕获，以最外层先执行，在执行内层，所以会先执行 doThat 再来才是 doThis

.self

<div v-on:click.self="doThat">
    <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
</div>

只有在 event.target 是当前元素自身的时候才会触发

.once

<a v-on:click.once="doThis"></a>

点击事件只会触发一次

.passive

<div v-on:scroll.passive="onScroll">...</div>

.passive 修饰符主要用於优化浏览器页面滚动的性能，让页面可以滚动更画顺
在滚动事件的默认行为(即滚动行为)将会例即触发，而不会等待 onScroll 完成
注意，不要把 .passive 跟 .prevent 一起使用，因为 .prevent 为被忽略，而且同时浏览器可能会发出警告。记住，.passive 会告诉浏览器你不想阻止事件的默认行为

事件修饰符 是可以串联的

可以同时使用两个修饰符，如下

<a v-on:click.stop.prevent="doThat"></a>

但是请注意 使用串联修饰符，顺序很重要
举例来说

v-on:click.prevent.self (会阻止所有的点击)

<a href="https://ithelp.ithome.com.tw/" @click.prevent.self="alertNUM(2)">
    <button v-on:click="doThis">prevent.self</button>
</a>
// ...
methods: {
    alertNUM(n){
        alert(n)
    }
}

因为先执行 .prevent 所以不会跳转画面，接着 .self 因为点到的是 button，所以也不会触发 alertNUM(2)

v-on:click.self.prevent (只会阻止对元素自身的点击)

<a href="https://ithelp.ithome.com.tw/" @click.self.prevent="alertNUM(2)">
    <button v-on:click="doThis">self.prevent</button>
</a>
// ...
methods: {
    alertNUM(n){
        alert(n)
    }
}

先判断了 .self ，但是点到的是 button，所以不会触发 alertNUM(2) 也不会阻止默认行为，所以就会进行网页跳转

在外部调用事件或资料

如果，开发时可能会有另一份 js 档，会去调用到 Vue 里面的资料或是方法时，那麽该如何去做呢?
还记得吗? 我们 Vue 的实例都是透过 var app = new Vue({ }) 这样的方式建立出来的
所以外部档案如果需要调用可以透过 app. 来取得~

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg1: "hello Tom",
        },
        methods:{
            sayhi(){
                alert(this.msg1);
            }
        }
    })

    // 从外部调用
    console.log(app.msg1);
    app.sayhi();
</script>

可以成功取得 msg1 和呼叫 sayhi() function

参考资料

Vue 官方文件
Vue.js Core 30天屠龙记(第17天): v-on 的修饰符 Part 1 - 事件修饰符, iT邦帮忙 Peter Chen
开源问答 vue事件处理：@click.prevent.self和@click.self.prevent区别
segmentfault passive的作用和原理
TechBridge 技术共笔部落格 DOM 的事件传递机制：捕获与冒泡
CSDN vue click.stop阻止点击事件继续传播