[[官方文檔]](https://vuejs.org/v2/guide/events.html) `v-on:eventName=""` We can use the`v-on`directive to listen to DOM events and run some JavaScript when they’re triggered. ---- 目錄： [TOC] ---- ## Explicit Events ### Listening to Events ~~~html <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ~~~ ~~~javascript var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) ~~~ ### Method Event Handlers ~~~html <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:click="greet">Greet</button> </div> ~~~ ~~~javascript var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // define methods under the `methods` object methods: { greet: function (event) { // `this` inside methods points to the Vue instance alert('Hello ' + this.name + '!') // `event` is the native DOM event if (event) { alert(event.target.tagName) } } } }) // you can invoke methods in JavaScript too example2.greet() // => 'Hello Vue.js!' ~~~ ### Methods in Inline Handlers ~~~html <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> ~~~ ~~~javascript new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) ~~~ ## Listeners in HTML The whole `Vue` event listening approach violates the good old rules about “separation of concerns”. All `Vue` handler functions and expressions are strictly bound to the ViewModel that’s handling the current view, it won’t cause any maintenance difficulty. In fact, there are several benefits in using`v-on`: 1. It’s easier to locate the handler function implementations within your JS code by skimming the HTML template. 2. Since you don’t have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test. 3. When a ViewModel is destroyed, all event listeners are automatically removed. You don’t need to worry about cleaning it up yourself. ## Event Modifiers It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details. To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot. * `.stop` * `.prevent` * `.capture` * `.self` * `.once` * `.passive` ~~~html <!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"></a> <!-- the submit event will no longer reload the page --> <form v-on:submit.prevent="onSubmit"></form> <!-- modifiers can be chained --> <a v-on:click.stop.prevent="doThat"></a> <!-- just the modifier --> <form v-on:submit.prevent></form> <!-- use capture mode when adding the event listener --> <!-- i.e. an event targeting an inner element is handled here before being handled by that element --> <div v-on:click.capture="doThis">...</div> <!-- only trigger handler if event.target is the element itself --> <!-- i.e. not from a child element --> <div v-on:click.self="doThat">...</div> <!-- the click event will be triggered at most once --> <a v-on:click.once="doThis"></a> <!-- the scroll event's default behavior (scrolling) will happen --> <!-- immediately, instead of waiting for `onScroll` to complete --> <!-- in case it contains `event.preventDefault()` --> <div v-on:scroll.passive="onScroll">...</div> ~~~ >[warning] Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `v-on:click.prevent.self` will prevent **all clicks** while `v-on:click.self.prevent` will only prevent clicks on the element itself. >[warning] Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](https://vuejs.org/v2/guide/components-custom-events.html). The`.passive`modifier, corresponding to [`addEventListener`‘s`passive`option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters), is especially useful for improving performance on mobile devices. >[warning] Don’t use `.passive` and `.prevent` together. Because `.prevent` will be ignored and your browser will probably show you a warning. Remember, `.passive` communicates to the browser that you *don’t* want to prevent the event’s default behavior. ## Key Modifiers When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for`v-on`when listening for key events: ~~~html <!-- only call `vm.submit()` when the `key` is `Enter` --> <input v-on:keyup.enter="submit"> ~~~ You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)as modifiers by converting them to kebab-case. ~~~html <input v-on:keyup.page-down="onPageDown"> ~~~ In the above example, the handler will only be called if`$event.key`is equal to`'PageDown'`. ### System Modifier Keys You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed: * `.ctrl` * `.alt` * `.shift` * `.meta` >[info] Note: > On Macintosh keyboards, **meta** is the command key (?). > On Windows keyboards, **meta** is the Windows key (?). > On Sun Microsystems keyboards, **meta** is marked as a solid diamond (◆). > On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, **meta** is labeled “META”. > On Symbolics keyboards, **meta** is labeled “META” or “Meta”. For example: ~~~html <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> ~~~ >[warning] Note that modifier keys are different from regular keys and when used with`keyup`events, they have to be pressed when the event is emitted. > In other words,`keyup.ctrl`will only trigger if you release a key while holding down`ctrl`. It won’t trigger if you release the`ctrl`key alone. If you do want such behaviour, use the`keyCode`for`ctrl`instead:`keyup.17`. ### `.exact`Modifier The `.exact` modifier allows control of the exact combination of system modifiers needed to trigger an event. ~~~html <!-- this will fire even if Alt or Shift is also pressed --> <button @click.ctrl="onClick">A</button> <!-- this will only fire when Ctrl and no other keys are pressed --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- this will only fire when no system modifiers are pressed --> <button @click.exact="onClick">A</button> ~~~ ### Mouse Button Modifiers * `.left` * `.right` * `.middle` These modifiers restrict the handler to events triggered by a specific mouse button. ## Tips ### eventBus--事件總線 [[Vue的this.$root.Bus.$on事件被多次觸發、多次監聽的問題]](https://blog.csdn.net/qq_26963495/article/details/86489063) 前端vue項目中，各個組件（非父子關系也可）之間可以通過Bus進行事件通信。 main.js中： ~~~Javascript import Vue from 'vue' const Bus = new Vue(); const app = new Vue({ el: '#app', data: {Bus}, router, components: {App}, template: '<App/>' }) ~~~ 進過如上配置后即可在各個組件中通過如下： ~~~Javascript this.$root.Bus.$emit("事件名", 參數1, 參數2, ...) ~~~ 來給總線Bus發一條事件信息。 其他組件通過如下： ~~~Javascript this.$root.Bus.$on("事件名", 回調函數) ~~~ 來監聽總線Bus中的某個事件，執行回調函數了。 問題描述： 有時候會發生事件只被`emit`觸發了一次，但是回調函數卻被執行了多次的現象。這種現象往往發生在頁面跳轉退出后重新進入的時候。 產生原因： `this.$root.Bus.$on`實際是向Bus容器中添加一個事件監聽器，當頁面跳轉時，原來的vue組件被注銷，但是原來vue組件向Bus容器中添加的事件監聽器并不會被移除。因此，當下次進入這個vue組件對應的頁面時，執行到`this.$root.Bus.$on`時，又會向Bus容器中添加一個重復的事件監聽器，以此類推，導致Bus容器中有很多個一模一樣的事件監聽器，從而導致事件只被觸發一次，但是回調函數被執行多次的現象。 解決方案： 在vue組件的`beforeDetory`鉤子函數中將本vue組件往Bus容器中添加的時間監聽器全部手動移除。 ~~~Javascript //在vue對象的methods域中定義一個函數，專門移除事件監聽器 offxxxListener: function () { this.$root.Bus.off("事件名"); this.$root.Bus.off("事件名"); this.$root.Bus.off("事件名"); }, //在vue對象的beforeDestroy鉤子中調用以上函數 beforeDestroy() { this.offxxxListener(); }, ~~~ ### $event的理解 [[CSDN-$event的理解]](https://blog.csdn.net/dangbai01_/article/details/83864498)