Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day3: DOM 事件綁定、客製化事件、await block 語法教學
Search
Kalan
September 12, 2020
Programming
0
240
Day3: DOM 事件綁定、客製化事件、await block 語法教學
介紹 Svelte 當中的 DOM 事件綁定、客製化事件與 await block 語法教學
Kalan
September 12, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
780
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
340
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
370
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
190
Svelte 如何編譯程式碼(1)
kjj6198
0
190
Day22. Svelte 經驗談
kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
130
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
160
技術同人誌をMCP Serverにしてみた
74th
1
680
AIともっと楽するE2Eテスト
myohei
7
2.9k
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.7k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
610
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.8k
Hack Claude Code with Claude Code
choplin
5
2.4k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
430
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Invisible Side of Design
smashingmag
301
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Visualization
eitanlees
146
16k
RailsConf 2023
tenderlove
30
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day3 事件綁定、客製事件與 await 語法應⽤
第 12 屆 IT 鐵⼈賽 本⽇⽬標 學習事件綁定、客製化事件、await block 的使⽤
第 12 屆 IT 鐵⼈賽 事件綁定 on:event 名稱 可以接收 script
裡頭定義的函數 也可以使⽤表達式 Svelte 會幫忙處理事件的註冊和銷毀
第 12 屆 IT 鐵⼈賽 事件綁定 - modifier 透過語法輔助減少樣板代碼 preventDefault
- 取消預設⾏為 stopPropgation - 取消冒泡 capture - 在捕捉階段觸發事件 once - 執⾏⼀次事件監聽器 self - 在 e.target 為⾃⼰時才會觸發 可以串接多個 modifier
第 12 屆 IT 鐵⼈賽 客製化事件 可以監聽元件⾃定義的事件 createEventDispatcher:背後為 DispatchEvent 與
CustomEvent 的封裝(MDN ⽂件) dispatch('事件名稱', {參數}) 可以⽤ e.detail.xxx 取得
第 12 屆 IT 鐵⼈賽 事件應⽤練習 https://svelte.dev/repl/hello-world?version=3.25.0
第 12 屆 IT 鐵⼈賽 await block 簡化 Promise 的樣板語法
第 12 屆 IT 鐵⼈賽 await block 應⽤ 串接 Github
API 並顯⽰在畫⾯當中