事件綁定

在昨天分享的即時更新中有帶到按鈕的點擊事件綁定，今天來正式說明一下。

綁定事件的方式

綁定事件主要是on修飾詞後面帶事件名稱，例如 click 或是 keydown 之類的，這邊也可以用 | 再帶一個變更事件的修飾詞，例如 once 這個只會執行事件一次就移除事件的修飾詞。

所以簡單說明如下所示。

on:eventname={handler}
on:eventname|modifiers={handler}

在svelte還可以綁定複數的事件，或者直接在內寫下arrow function如下所示。

<button on:click="{() => count += 1}" on:click="{alert('onClick!')}">
    count: {count}
</button>

最後如果當 on 事件後明沒有賦予值的話是什麼意思呢？那就表示他會把事件轉發給使用他的元件，讓使用他的元件負責處理事件。

小結

今天跟大家分享如何在 svelte 實作 html 的綁定，明天準備跟大家分享屬性的綁定。