Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Kalan
September 12, 2020

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

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

Kalan

September 12, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day3 事件綁定、客製事件與 await 語法應⽤
  2. 第 12 屆 IT 鐵⼈賽 事件綁定 on:event 名稱 可以接收 script

    裡頭定義的函數 也可以使⽤表達式 Svelte 會幫忙處理事件的註冊和銷毀
  3. 第 12 屆 IT 鐵⼈賽 事件綁定 - modifier 透過語法輔助減少樣板代碼 preventDefault

    - 取消預設⾏為 stopPropgation - 取消冒泡 capture - 在捕捉階段觸發事件 once - 執⾏⼀次事件監聽器 self - 在 e.target 為⾃⼰時才會觸發 可以串接多個 modifier
  4. 第 12 屆 IT 鐵⼈賽 客製化事件 可以監聽元件⾃定義的事件 createEventDispatcher:背後為 DispatchEvent 與

    CustomEvent 的封裝(MDN ⽂件) dispatch('事件名稱', {參數}) 可以⽤ e.detail.xxx 取得