【第一季第二期】Dive into javascript event
- 1. Dive Into Javascript Event chengjing@taobao.com
- 2. Dive Into Javascript Event chengjing@taobao.com
- 4. Outline Survey Scenario Preparation Event Type Event Mechanism Implement an Event Library
- 6. Survey
- 10. Scenario
- 11. Scenario ?
- 13. Preparation
- 14. Preparation YUI
- 15. Preparation
- 17. Event Type
- 18. Event Type Interface Events scroll resize focus blur ...
- 19. Event Type Interface Events scroll resize focus blur ... Mouse Events mouseover mouseout ...
- 20. Event Type Interface Events scroll resize focus blur ... Mouse Events mouseover mouseout ... Form Events submit reset ...
- 21. Event Type Interface Events scroll resize focus blur ... Mouse Events mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation...
- 22. Event Type Interface Events scroll resize focus blur ... Mouse Events mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation... Microsoft Events mouseenter mouseleave...
- 24. Mouse Event
- 25. Mouse Event dblclick click mousedown mousemove mouseover mouseout
- 26. Mouse Event dblclick click mousedown mousemove mouseover mouseout mouseenter mouseleave
- 28. Mouse Event
- 29. Mouse Event
- 31. Event Mechanism
- 32. Event Mechanism
- 33. Event Mechanism Click
- 34. Event Mechanism
- 35. Event Mechanism
- 36. Event Mechanism
- 37. Event Mechanism
- 38. Event Mechanism
- 39. Event Mechanism
- 40. Event Mechanism
- 41. Event Mechanism
- 49. Event Mechanism
- 52. Event Mechanism
- 58. Event Mechanism
- 65. Event Mechanism Same Parameters? ≠ ≠
- 66. Event Mechanism
- 67. Event Mechanism Sequence of Multiple Listeners
- 68. Event Mechanism Sequence of Multiple Listeners
- 69. Event Mechanism Sequence of Multiple Listeners
- 70. Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)
- 71. Event Mechanism Sequence of Multiple Listeners alert(1) Queue alert(2)
- 72. Event Mechanism Sequence of Multiple Listeners alert(1) Queue alert(2)
- 73. Event Mechanism Sequence of Multiple Listeners alert(2) alert(1) Queue alert(1) alert(2)
- 74. Event Mechanism Sequence of Multiple Listeners alert(2) alert(1) Queue Stack alert(1) alert(2)
- 75. Event Mechanism
- 78. Event Mechanism
- 79. Event Mechanism Turn Bubbling Off
- 80. Event Mechanism Turn Bubbling Off
- 81. Event Mechanism
- 86. Event Mechanism Event Target Target will always be element2
- 87. Event Mechanism Event Target Target will always be element2 e.currentTarget
- 88. Event Mechanism Event Target Target will always be element2 e.currentTarget
- 89. Event Mechanism Event Target Target will always be element2 e.currentTarget
- 90. Event Mechanism
- 91. Event Mechanism “This” in Event
- 92. 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
- 93. 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
- 94. 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
- 95. 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
- 96. 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
- 97. 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
- 98. 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
- 99. 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
- 100. 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
- 101. 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
- 102. 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
- 103. 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
- 104. 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
- 105. 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
- 106. 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
- 107. 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
- 108. Implement an Event Library
- 109. Implement an Event Library Version one: “this”
- 110. Implement an Event Library Version one: “this”
- 111. Implement an Event Library
- 112. Implement an Event Library Version Two: e and data
- 113. Implement an Event Library Version Two: e and data
- 114. Implement an Event Library Version Two: e and data
- 115. Implement an Event Library
- 116. Implement an Event Library Version Three: Combine e and data
- 117. Implement an Event Library Version Three: Combine e and data
- 118. Implement an Event Library Version Three: Combine e and data
- 119. Implement an Event Library Version Three: Combine e and data
- 120. Implement an Event Library Version Three: Combine e and data TODO: Encapsulate the original event object
- 121. Implement an Event Library Version Three: Combine e and data TODO: Encapsulate the original event object
- 124. Acknowledge
- 125. 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/
- 126. Thanks!