/

在Svelte中使用事件

在Svelte中使用事件

學習如何在Svelte中處理事件

監聽DOM事件

在Svelte中，你可以使用on:<event>語法在模板中直接定義DOM事件的監聽器。

例如，要監聽click事件，你可以將一個函數傳遞給on:click屬性。

要監聽onmousemove事件，你可以將一個函數傳遞給on:mousemove屬性。

以下是一個範例，其中處理函數在內聯中定義：

1
2
3
<button on:click={() => {
 alert('clicked')
}}>點擊我</button>

以下是另一個範例，其中處理函數在組件的script部分中定義：

1
2
3
4
5
6
7
<script>
const doSomething = () => {
 alert('clicked')
}
</script>

<button on:click={doSomething}>點擊我</button>

當代碼不太冗長時，我更喜歡內聯。如果只有2-3行，例如，否則我會將其移至組件的script部分。

Svelte將事件處理程序作為函數的參數傳遞，這很方便，如果你需要停止事件傳播或參考事件對象中的某些內容：

1
2
3
4
5
6
7
8
<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函數並調用它以獲取一個事件分發器：

1
2
3
4
<script>
 import { createEventDispatcher } from 'svelte'
 const dispatch = createEventDispatcher()
</script>

一旦這樣做，我們可以調用dispatch()函數，並傳遞一個字符串，用於識別事件（我們將在使用此事件的其他組件中使用on:語法）：

1
2
3
4
5
6
7
<script>
 import { createEventDispatcher } from 'svelte'
 const dispatch = createEventDispatcher()

 //當觸發事件的時候
 dispatch('eventName')
</script>

現在，其他組件可以使用我們的組件，並使用以下方式：

1
2
3
<ComponentName on:eventName={event => {
 //做一些事情
}} />

你也可以將對象傳遞給事件，在dispatch()的第二個參數中傳遞：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
 import { createEventDispatcher } from 'svelte'
 const dispatch = createEventDispatcher()
 const value = 'something'

 //當觸發事件的時候
 dispatch('eventName', value)

 //或者

 dispatch('eventName', {
 someProperty: value
 })
</script>

由dispatch()傳遞的對象可以在event對像上作為event.detail使用。

tags: [“Svelte”, “DOM events”, “custom events”, “event handling”]