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
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
330
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.3k
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
210
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
310
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
OSS開発者という働き方
andpad
5
1.4k
ゲームの物理
fadis
5
1.6k
The State of Fluid (2025)
s2b
0
200
Updates on MLS on Ruby (and maybe more)
sylph01
1
160
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.5k
GitHub's CSS Performance
jonrohan
1032
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why Our Code Smells
bkeepers
PRO
339
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Rails Girls Zürich Keynote
gr2m
95
14k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Designing for Performance
lara
610
69k
Producing Creativity
orderedlist
PRO
347
40k
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 並顯⽰在畫⾯當中