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
770
選擇 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
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Team operations that are not burdened by SRE
kazatohiei
1
290
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
690
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
160
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
360
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
CursorはMCPを使った方が良いぞ
taigakono
1
210
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
830
ニーリーにおけるプロダクトエンジニア
nealle
0
690
Select API from Kotlin Coroutine
jmatsu
1
210
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Being A Developer After 40
akosma
90
590k
Become a Pro
speakerdeck
PRO
28
5.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Done Done
chrislema
184
16k
Automating Front-end Workflow
addyosmani
1370
200k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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 並顯⽰在畫⾯當中