event handling

Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。這個主題是使組件可以互動的關鍵。 什麼是Vue.js事件 存取原始事件對象 事件修飾符 什麼是Vue.js事件 Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。 如果我們想要在這個元素上發生點擊事件時做一些事情： <template> <a>點擊我！</a> </template> 我們添加一個v-on指令： <template> <a v-on:click="handleClick">點擊我！</a> </template> Vue還提供了一種非常便捷的替代語法： <template> <a @click="handleClick">點擊我！</a> </template> 您可以選擇使用括號或不使用括號。@click="handleClick"等效於@click="handleClick()"。 handleClick是附加到組件的方法： <script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script> 詳細的方法在我 Vue 方法教程中有更詳盡的解釋。 你在這裡需要知道的是，你可以從事件中傳遞參數：@click="handleClick(param)"，並且它們將在方法內被接收。 存取原始事件對象 在許多情況下，您希望對事件對象執行操作或查找其中的某些屬性。您如何訪問它？ 使用特殊的$event指令： <template> <a @click="handleClick($event)">點擊我！</a> </template> <script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script> 如果你已經傳遞了一個變數： <template> <a @click="handleClick('something', $event)">點擊我！</a> </template> <script> export default { methods: { handleClick: function(text, event) { console....

Vue 方法是與 Vue 實例相關聯的函數。方法定義在 methods 屬性中。讓我們看一下它們是如何工作的。 什麼是 Vue.js 方法 將參數傳遞給 Vue.js 方法 如何從方法中訪問數據 什麼是 Vue.js 方法 Vue 方法是與 Vue 實例相關聯的函數。 方法定義在 methods 屬性中： new Vue({ methods: { handleClick: function() { alert('測試') } } }) 在單文件組件的情況下： <script> export default { methods: { handleClick: function() { alert('測試') } } } </script> 在需要執行動作並且將 v-on 指令附加到元素來處理事件時，方法尤其有用。例如，以下代碼在元素被點擊時調用 handleClick 方法： <template> <a @click="handleClick">點我！</a> </template> 將參數傳遞給 Vue.js 方法 方法可以接受參數。 在這種情況下，您只需要在模板中傳遞參數，然後在方法內部使用它： <template> <a @click="handleClick('something')">點我！</a> </template> new Vue({ methods: { handleClick: function(text) { alert(text) } } }) 在單文件組件的情況下：...

學習如何在Svelte中處理事件 監聽DOM事件 在Svelte中，你可以使用on:<event>語法在模板中直接定義DOM事件的監聽器。 例如，要監聽click事件，你可以將一個函數傳遞給on:click屬性。 要監聽onmousemove事件，你可以將一個函數傳遞給on:mousemove屬性。 以下是一個範例，其中處理函數在內聯中定義： <button on:click={() => { alert('clicked') }}>點擊我</button> 以下是另一個範例，其中處理函數在組件的script部分中定義： <script> const doSomething = () => { alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 當代碼不太冗長時，我更喜歡內聯。如果只有2-3行，例如，否則我會將其移至組件的script部分。 Svelte將事件處理程序作為函數的參數傳遞，這很方便，如果你需要停止事件傳播或參考事件對象中的某些內容： <script> const doSomething = event => { console.log(event) alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 現在，我提到了“停止事件傳播”。這是一個非常常見的操作，例如停止提交表單事件。Svelte提供了修飾符，可以直接應用它，而無需手動處理。 stopPropagation和preventDefault是你最常使用的兩個修飾符，我想。 你可以這樣應用修飾符：<button on:click|stopPropagation|preventDefault={doSomething}>點擊我</button> 還有其他修飾符，它們更加專業化。capture使事件捕獲而不是冒泡，once只觸發一次事件，self只有當事件的目標是該對象時才觸發該事件（從冒泡/捕獲層次結構中移除）。 在組件中創建自定義事件 有趣的是，我們可以在組件中創建自定義事件，並使用相同的內建DOM事件語法。 要做到這一點，我們必須從svelte包中引入createEventDispatcher函數並調用它以獲取一個事件分發器： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() </script> 一旦這樣做，我們可以調用dispatch()函數，並傳遞一個字符串，用於識別事件（我們將在使用此事件的其他組件中使用on:語法）： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() //當觸發事件的時候 dispatch('eventName') </script> 現在，其他組件可以使用我們的組件，並使用以下方式：...