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
200
Day3: DOM 事件綁定、客製化事件、await block 語法教學
介紹 Svelte 當中的 DOM 事件綁定、客製化事件與 await block 語法教學
Kalan
September 12, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
730
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
230
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
110
状態管理を楽にする道
kjj6198
1
270
Day25. 如何解析 HTML 語法
kjj6198
0
100
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
140
Svelte 如何編譯程式碼(1)
kjj6198
0
120
Day22. Svelte 經驗談
kjj6198
0
110
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
100
Other Decks in Programming
See All in Programming
使ってみよう Azure AI Document Intelligence
kosmosebi
2
290
Semantic search with Django and pgvector
pauloxnet
0
240
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
Milestoner
bkuhlmann
1
410
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
Elm 0.19.0 Changes
bkuhlmann
0
490
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
SIMD Parallel Programming with the Vector API
josepaumard
0
120
Netty Chicago Java User Group 2024-04-17
sullis
0
170
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
For a Future-Friendly Web
brad_frost
172
9k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Invisible Side of Design
smashingmag
294
49k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Automating Front-end Workflow
addyosmani
1356
200k
Producing Creativity
orderedlist
PRO
337
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Typedesign – Prime Four
hannesfritz
36
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
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 並顯⽰在畫⾯當中