Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dive Into JavaScript Events

Goddy Zhao
September 03, 2012
Technology
3
400

Dive Into JavaScript Events

Describe the internal mechanism of JavaScript Events!

Goddy Zhao

September 03, 2012
Tweet

More Decks by Goddy Zhao

See All by Goddy Zhao
NProxy——A Sharp Weapon for UI Developers
goddyzhao
7
2.3k
Rise of Node (Part I)
goddyzhao
5
280

Other Decks in Technology

See All in Technology
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
5
590
誰も全体を知らない ～ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
第1回 国土交通省 データコンペ参加者向け勉強会③ - Snowflake x estie編 -
estie
0
120
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
B2B SaaS × AI機能開発 〜テナント分離のパターン解説〜 / B2B SaaS x AI function development - Explanation of tenant separation pattern
oztick139
2
220
Taming you application's environments
salaboy
0
180
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Platform Engineering for Software Developers and Architects
syntasso
1
510
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170

Featured

See All Featured
Six Lessons from altMBA
skipperchong
27
3.5k
A designer walks into a library…
pauljervisheath
203
24k
Fireside Chat
paigeccino
34
3k
Faster Mobile Websites
deanohume
305
30k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Speed Design
sergeychernyshev
24
610
Statistics for Hackers
jakevdp
796
220k
Bash Introduction
62gerente
608
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Art, The Web, and Tiny UX
lynnandtonic
297
20k

Transcript

  1. Dive Into Javascript Event 澄净 [email protected] Monday, September 3, 12

  2. Dive Into Javascript Event 澄净 [email protected] Monday, September 3, 12

  3. Monday, September 3, 12

  4. Outline Event Type Event Mechanism Implement an Event Library Monday,

    September 3, 12

  5. Monday, September 3, 12

  6. Event Type Monday, September 3, 12

  7. Interface Events Event Type scroll resize focus blue ... Monday,

    September 3, 12

  8. Interface Events Event Type Mouse Events scroll resize focus blue

    ... mouseover mouseout ... Monday, September 3, 12

  9. Interface Events Event Type Mouse Events scroll resize focus blue

    ... mouseover mouseout ... Form Events submit reset ... Monday, September 3, 12

  10. Interface Events Event Type Mouse Events scroll resize focus blue

    ... mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation... Monday, September 3, 12

  11. Interface Events Event Type Mouse Events scroll resize focus blue

    ... mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation... Microsoft Events mouseenter mouseleave... Monday, September 3, 12

  12. Monday, September 3, 12

  13. Mouse Event Monday, September 3, 12

  14. Mouse Event click dblclick mouseover mousedownmousemove mouseout Monday, September 3,

    12

  15. Mouse Event click dblclick mouseover mousedownmousemove mouseout mouseenter mouseleave Monday,

    September 3, 12

  16. Monday, September 3, 12

  17. Mouse Event Monday, September 3, 12

  18. Mouse Event Monday, September 3, 12

  19. Monday, September 3, 12

  20. Event Mechanism Monday, September 3, 12

  21. Event Mechanism Monday, September 3, 12

  22. Event Mechanism Click Monday, September 3, 12

  23. Event Mechanism Monday, September 3, 12

  24. Event Mechanism Monday, September 3, 12

  25. Event Mechanism Monday, September 3, 12

  26. Event Mechanism Monday, September 3, 12

  27. Event Mechanism Monday, September 3, 12

  28. Event Mechanism Monday, September 3, 12

  29. Event Mechanism Monday, September 3, 12

  30. Event Mechanism Event Mechanism Monday, September 3, 12

  31. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  32. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  33. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  34. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  35. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  36. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  37. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  38. Event Mechanism Event Mechanism Monday, September 3, 12

  39. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  40. Event Mechanism Event Registration Event Mechanism Monday, September 3, 12

  41. Event Mechanism Event Mechanism Monday, September 3, 12

  42. Event Mechanism Attention! Event Mechanism Monday, September 3, 12

  43. Event Mechanism Attention! Event Mechanism Monday, September 3, 12

  44. Event Mechanism Attention! Event Mechanism Same Parameters? Monday, September 3,

    12

  45. Event Mechanism Attention! Event Mechanism Same Parameters? Monday, September 3,

    12

  46. Event Mechanism Attention! Event Mechanism Same Parameters? Monday, September 3,

    12

  47. Event Mechanism Event Mechanism Monday, September 3, 12

  48. Event Mechanism Event Mechanism Same Parameters? Monday, September 3, 12

  49. Event Mechanism Event Mechanism Same Parameters? Monday, September 3, 12

  50. Event Mechanism Event Mechanism Same Parameters? Monday, September 3, 12

  51. Event Mechanism Event Mechanism Same Parameters? ≠ Monday, September 3,

    12

  52. Event Mechanism Event Mechanism Same Parameters? ≠ Monday, September 3,

    12

  53. Event Mechanism Event Mechanism Same Parameters? ≠ Monday, September 3,

    12

  54. Event Mechanism Event Mechanism Same Parameters? ≠ ≠ Monday, September

    3, 12

  55. Event Mechanism Event Mechanism Monday, September 3, 12

  56. Event Mechanism Event Mechanism Sequence of Multiple Listeners Monday, September

    3, 12

  57. Event Mechanism Event Mechanism Sequence of Multiple Listeners Monday, September

    3, 12

  58. Event Mechanism Event Mechanism Sequence of Multiple Listeners Monday, September

    3, 12

  59. Event Mechanism Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)

    Monday, September 3, 12

  60. Event Mechanism Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)

    Queue Monday, September 3, 12

  61. Event Mechanism Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)

    Queue Monday, September 3, 12

  62. Event Mechanism Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)

    alert(2) alert(1) Queue Monday, September 3, 12

  63. Event Mechanism Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)

    alert(2) alert(1) Queue Stack Monday, September 3, 12

  64. Event Mechanism Event Mechanism Monday, September 3, 12

  65. Event Mechanism Event Mechanism Event Object Monday, September 3, 12

  66. Event Mechanism Event Mechanism Event Object Monday, September 3, 12

  67. Event Mechanism Event Mechanism Monday, September 3, 12

  68. Event Mechanism Event Mechanism Turn Bubbling Off Monday, September 3,

    12

  69. Event Mechanism Event Mechanism Turn Bubbling Off Monday, September 3,

    12

  70. Event Mechanism Event Mechanism Monday, September 3, 12

  71. Event Mechanism Event Mechanism Event Target Monday, September 3, 12

  72. Event Mechanism Event Mechanism Event Target Monday, September 3, 12

  73. Event Mechanism Event Mechanism Event Target Monday, September 3, 12

  74. Event Mechanism Event Mechanism Event Target Monday, September 3, 12

  75. Event Mechanism Event Mechanism Event Target Target will always be

    element2 Monday, September 3, 12

  76. Event Mechanism Event Mechanism Event Target Target will always be

    element2 e.currentTarget Monday, September 3, 12

  77. Event Mechanism Event Mechanism Event Target Target will always be

    element2 e.currentTarget Monday, September 3, 12

  78. Event Mechanism Event Mechanism Event Target Target will always be

    element2 e.currentTarget Monday, September 3, 12

  79. Event Mechanism Event Mechanism Monday, September 3, 12

  80. Event Mechanism Event Mechanism “This” in Event Monday, September 3,

    12

  81. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Monday, September 3, 12

  82. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  83. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  84. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  85. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  86. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  87. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  88. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  89. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  90. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  91. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  92. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  93. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  94. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  95. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  96. Event Mechanism Event Mechanism “This” in Event In Javascript this

    always refers to the “owner” of the function we’re executing, or rather, to the object that a function is a method of Example: Register click handler on div1 Monday, September 3, 12

  97. Implement an Event Library Monday, September 3, 12

  98. Implement an Event Library Version One Monday, September 3, 12

  99. Implement an Event Library Version One Monday, September 3, 12

  100. Implement an Event Library Monday, September 3, 12

  101. Implement an Event Library Version Two: “this” Monday, September 3,

    12

  102. Implement an Event Library Version Two: “this” Monday, September 3,

    12

  103. Implement an Event Library Monday, September 3, 12

  104. Implement an Event Library Version Three: e and data Monday,

    September 3, 12

  105. Implement an Event Library Version Three: e and data Monday,

    September 3, 12

  106. Implement an Event Library Version Three: e and data Monday,

    September 3, 12

  107. Implement an Event Library Monday, September 3, 12

  108. Implement an Event Library Version Three: Combine e and data

    Monday, September 3, 12

  109. Implement an Event Library Version Three: Combine e and data

    Monday, September 3, 12

  110. Implement an Event Library Version Three: Combine e and data

    Monday, September 3, 12

  111. Implement an Event Library Version Three: Combine e and data

    Monday, September 3, 12

  112. Implement an Event Library Version Three: Combine e and data

    TODO: Encapsulate the original event object Monday, September 3, 12

  113. Implement an Event Library Version Three: Combine e and data

    TODO: Encapsulate the original event object Monday, September 3, 12

  114. Monday, September 3, 12

  115. Monday, September 3, 12

  116. Acknowledge Monday, September 3, 12

  117. Acknowledge PPK: http://www.quirksmode.org W3C: http://www.w3.org/TR/2000/REC-DOM-Level-2- Events-20001113/ YUI Source Code(v2.8.1): http://developer.yahoo.com/yui/2/

    JQuery Source Code(v1.4): http://jquery.com/ Google Closure Library: http://code.google.com/closure/ library/ Monday, September 3, 12

  118. Thanks! Monday, September 3, 12