11 監聽 DOM 事件和事件修飾符 · JavaBeginnersTutorial 中文系列教程

# 11 監聽 DOM 事件和事件修飾符 > 原文： [https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/) 我們在事件方面一直處于停滯狀態。現在，讓我們學習如何收聽 DOM 事件，即`click`事件。看一下起始代碼， #### `Index.html` ```js <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <button>Say Hello</button> <p> {{ message }} </p> </div>  <script src="index.js"></script> </body> </html> ``` #### `Index.js` ```js var app = new Vue({ el: "#app", data: { message: "Hi" } }); ``` 地球上最著名的按鈕事件是`click`事件。假設我們要在單擊“說你好”按鈕時將消息“嗨”更改為“你好”。知道我們如何通過 Vue 實現這一目標嗎？親們，人民，Vue 為此又有另一個指令，`v-on`！我們始終可以使用`v-on`監聽 DOM 事件，例如， * 鼠標事件 – `click`，`dblclick`，`mousemove`，`mouseover`等。 * 鍵盤事件 - `keypress`，`keyup`，`keydown`等。 * 表單事件 – `submit`，`focus`，`blur`等 * 還有很多 ## 監聽點擊事件因此，我們現在的任務是監聽按鈕“Say Hello”上發生點擊事件時，將消息文本從“`Hi`”更改為“`Hello`”。一件事很清楚。我們必須將`v-on`指令添加到將要監聽`click`事件的`button`元素中。 ```js <button v-on:click="message='Hello'">Say Hello</button> ``` 剖析語法， * `v-on` – Vue 知道我們正在使用此指令來監聽事件 * `click` – 指定在冒號之后我們正在監聽的事件的類型 * `=` – 在等號后，指定觸發事件時我們要執行的方法名稱或 JavaScript 代碼。我們正在從 Vue 實例的數據對象訪問`message`屬性，并將其設置為“`Hello`”。輸出如下， ![click event](https://img.kancloud.cn/4d/9c/4d9c377baa387a74d7d6977b9513cfcc_371x267.png) 酷！但是在實際的應用中，我們將要做的不僅僅是改變屬性的文本。 **令人費解的問題**：如何在`v-on`指令的雙引號中放入復雜的 JavaScript 代碼？ ### 使用方法上面提到的大腦拖曳問題的答案是使用方法。就像`data`對象一樣，我們的 Vue 實例有一個可選的`methods`對象，我們可以在其中定義所有方法。現在，在`v-on`的雙引號中，只需提及方法的名稱，然后**傳遞所需的參數**（如果有）。然后，在 Vue 實例的`methods`對象中定義方法，該方法將在每次`click`事件發生時觸發。 #### `Index.html`（代碼段） ```html <button v-on:click="greet('howdy')">Say Hello</button> ``` #### `Index.js` ```jsscript var app = new Vue({ el: "#app", data: { message: "Hi" }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; } } }); ``` 您注意到`this`關鍵字的用法了嗎？為了從 HTML 引用`data`對象的屬性，我們可以直接使用它們，因為我們使用`el`關鍵字將特定的 HTML 部分與 Vue 實例掛鉤。但是，在`methods`內部，我們必須使用`‘this’`關鍵字指向 Vue 實例，然后訪問`data`對象的屬性。 ![click event with method](https://img.kancloud.cn/ba/92/ba925f9c7837be66b85f1c7d027f3b23_277x227.png) 單擊該按鈕，“說聲你好”觸發了`greet('howdy')`方法，并且該方法中的代碼被執行，從而向網頁呈現“`Howdy`”。 ## 事件修飾符假設我們有一個名為“**加 1**”的按鈕和一個初始值為`zero`的計數器。每次單擊該按鈕時，都會在現有的`counter`值上加 1 并將其打印到屏幕上。現在讓我們將想象力帶入現實。只需將`v-on`指令與`click`用作參數，即可觸發將`counter`值加 1 的方法。 #### `Index.html` （代碼段） ```html <button v-on:click="addOne">Add 1</button> <p> {{ counter }} </p> ``` #### `Index.js`（代碼段） ```jsscript methods: { addOne: function() { this.counter += 1; } } ``` **腦筋急轉彎問題**： *如果我們只想先在`click`上觸發此方法，然后再不觸發該方法怎么辦？* 該問題的答案是 – **事件修飾符**！這些使我們能夠**修改事件**的行為（正如其名稱所暗示的）。 **用法**：在事件名稱（在本例中為`click`）之后，添加一個點并指定要使用的修飾符的名稱。 ```html <button v-on:click.once="addOne">Add 1</button> ``` 使用事件修飾符`.once`，`click`事件將僅觸發一次。這意味著，無論單擊按鈕多少次，只要將`counter`的值增加到 1，`addOne`方法將僅被調用。 ![.once event modifier](https://img.kancloud.cn/a7/bd/a7bdd4f6fb27ba4473afe2b6579eeff8_415x413.png) 同樣，其他可用的事件修飾符是 + `.stop` + `.prevent` + `.capture` + `.self` + `.once` + `.passive` 最常用的修飾符是`.stop`和`.prevent`，它們稱為眾所周知的`event.stopPropagation()`和`event.preventDefault()`方法。這些是[本機事件對象](https://www.w3schools.com/jsref/obj_event.asp)隨附的方法。這里與 Vue 無關。 Vue.js 只是提供了一種簡單的方法，借助修飾符來處理此類常見事件詳細信息，而不是在 Vue 實例的方法中顯式指定這些事件方法（例如`event.preventDefault()`來取消事件）。 ### 兩個最常用修飾符的快速刷新：根據`stopPropagation()`事件方法，`.stop`修飾符將進一步停止事件的傳播。根據`preventDefault()`方法，`.prevent`修飾符將防止發生默認操作。 `.prevent`的最佳示例是將其與`Submit`按鈕一起使用，以便觸發提交事件時，它不會重新加載頁面。 ### 鏈接修飾符 *警告：一開始可能會有些彎腰！* Vue 讓我們像這樣，將這些修飾符一個接一個地鏈接， ```html v-on:click.self.prevent ``` 鏈接的**順序**非常重要。因為與每個修飾符相關的代碼是按相同順序生成的。例如， ```html <a href="https://vuejs.org/" v-on:click.self.prevent target="_blank">Open Vue <p>Click me now</p> </a> ``` 使用`v-on:click.self.prevent`僅會阻止單擊`<a>`元素本身，而不是單擊其`child`元素。好吧，我聽到你說“請用英語”！換句話說，這意味著 * 單擊`<a>`標簽的“**打開 Vue**”將阻止打開`vuejs.org`頁面 * 單擊標簽上的“**立即單擊我**”，將在新標簽中打開`vuejs.org`官方頁面相反，如果我們將鏈接修飾符的順序更改為`v-on:click.prevent.self`，則將防止發生所有單擊事件。 ```html <a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a> ``` 單擊`<a>`的“**打開 Vue**”和`<p>`的“**立即單擊我**”都不會打開`vuejs.org`（換句話說，它無法打開）。現在，讓我們看一下到目前為止處理的完整代碼， `index.html` ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2>  <button v-on:click="greet('howdy')">Say Hello</button> <p> {{ message }} </p> <h2>Event Modifiers</h2>  <button v-on:click.once="addOne">Add 1</button> <p> {{ counter }} </p>  <a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a> </div>  <script src="index.js"></script> </body> </html> ``` index.js ```jsscript var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } }); ``` 我知道今天有很多事情要消化。上面討論的所有代碼以及不言自明的注釋在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中可用。慢慢來，我很快就會回來討論鍵盤和其他鼠標 DOM 事件。祝你有個美好的一天！