Day3: DOM 事件綁定、客製化事件、await block 語法教學

介紹 Svelte 當中的 DOM 事件綁定、客製化事件與 await block 語法教學

Transcript

1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1 學 Svelte Day3 事件綁定、客製事件與 await 語法應⽤
2. 第 12 屆 IT 鐵⼈賽 本⽇⽬標 學習事件綁定、客製化事件、await block 的使⽤
3. 第 12 屆 IT 鐵⼈賽 事件綁定 on:event 名稱 可以接收 script 裡頭定義的函數 也可以使⽤表達式 Svelte 會幫忙處理事件的註冊和銷毀
4. 第 12 屆 IT 鐵⼈賽 事件綁定 - modifier 透過語法輔助減少樣板代碼 preventDefault - 取消預設⾏為 stopPropgation - 取消冒泡 capture - 在捕捉階段觸發事件 once - 執⾏⼀次事件監聽器 self - 在 e.target 為⾃⼰時才會觸發 可以串接多個 modifier
5. 第 12 屆 IT 鐵⼈賽 客製化事件 可以監聽元件⾃定義的事件 createEventDispatcher：背後為 DispatchEvent 與 CustomEvent 的封裝（MDN ⽂件） dispatch('事件名稱', {參數}) 可以⽤ e.detail.xxx 取得
6. 第 12 屆 IT 鐵⼈賽 事件應⽤練習 https://svelte.dev/repl/hello-world?version=3.25.0
7. 第 12 屆 IT 鐵⼈賽 await block 簡化 Promise 的樣板語法
8. 第 12 屆 IT 鐵⼈賽 await block 應⽤ 串接 Github API 並顯⽰在畫⾯當中