Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 語法應⽤

    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