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
350
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
380
Day25. 如何解析 HTML 語法
kjj6198
0
150
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
200
Svelte 如何編譯程式碼(1)
kjj6198
0
200
Day22. Svelte 經驗談
kjj6198
0
170
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
160
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
Reading Rails 1.0 Source Code
okuramasafumi
0
110
1から理解するWeb Push
dora1998
7
1.9k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
Cache Me If You Can
ryunen344
2
700
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
180
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
3.9k
Namespace and Its Future
tagomoris
6
700
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Cult of Friendly URLs
andyhume
79
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Into the Great Unknown - MozCon
thekraken
40
2k
How STYLIGHT went responsive
nonsquared
100
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Code Review Best Practice
trishagee
70
19k
Designing for humans not robots
tammielis
253
25k
GraphQLとの向き合い方2022年版
quramy
49
14k
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 並顯⽰在畫⾯當中