第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY10-html 事件處理

事件綁定

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

綁定事件的方式

綁定事件主要是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的綁定,明天準備跟大家分享屬性的綁定。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *