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

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

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day3 事件綁定、客製事件與 await 語法應⽤
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   本⽇⽬標
   學習事件綁定、客製化事件、await block 的使⽤
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   事件綁定
   on:event 名稱
   可以接收 script 裡頭定義的函數
   也可以使⽤表達式
   Svelte 會幫忙處理事件的註冊和銷毀
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   事件綁定 - modifier
   透過語法輔助減少樣板代碼
   preventDefault - 取消預設⾏為
   stopPropgation - 取消冒泡
   capture - 在捕捉階段觸發事件
   once - 執⾏⼀次事件監聽器
   self - 在 e.target 為⾃⼰時才會觸發
   可以串接多個 modifier
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   客製化事件
   可以監聽元件⾃定義的事件
   createEventDispatcher：背後為
   DispatchEvent 與 CustomEvent 的封裝（MDN
   ⽂件）
   dispatch('事件名稱', {參數})
   可以⽤ e.detail.xxx 取得
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   事件應⽤練習
   https://svelte.dev/repl/hello-world?version=3.25.0
   

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   await block
   簡化 Promise 的樣板語法
   

   View Slide

8. 第 12 屆 IT 鐵⼈賽
   await block 應⽤
   串接 Github API 並顯⽰在畫⾯當中
   

   View Slide