Dive into javascript event
•Download as KEY, PDF•
4 likes•1,063 views
The document discusses JavaScript events including event types, the event mechanism, and how to implement an event library. It covers topics like event registration, the event object, event bubbling, event targets, and how "this" works in events. It also outlines three versions of building an event library, with the third version combining the event object and custom data and encapsulating the original event.
Recommended
More Related Content
Similar to Dive into javascript event
Similar to Dive into javascript event (20)
Recently uploaded
Recently uploaded (20)
Dive into javascript event
- 1. Dive Into Javascript Event chengjing@taobao.com
- 2. Dive Into Javascript Event chengjing@taobao.com
- 4. Outline Event Type Event Mechanism Implement an Event Library
- 6. Event Type
- 7. Event Type Interface Events scroll resize focus blue ...
- 8. Event Type Interface Events scroll resize focus blue ... Mouse Events mouseover mouseout ...
- 9. Event Type Interface Events scroll resize focus blue ... Mouse Events mouseover mouseout ... Form Events submit reset ...
- 10. Event Type Interface Events scroll resize focus blue ... Mouse Events mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation...
- 11. Event Type Interface Events scroll resize focus blue ... Mouse Events mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation... Microsoft Events mouseenter mouseleave...
- 13. Mouse Event
- 14. Mouse Event dblclick click mousedown mousemove mouseover mouseout
- 15. Mouse Event dblclick click mousedown mousemove mouseover mouseout mouseenter mouseleave
- 17. Mouse Event
- 18. Mouse Event
- 20. Event Mechanism
- 21. Event Mechanism
- 22. Event Mechanism Click
- 23. Event Mechanism
- 24. Event Mechanism
- 25. Event Mechanism
- 26. Event Mechanism
- 27. Event Mechanism
- 28. Event Mechanism
- 29. Event Mechanism
- 30. Event Mechanism
- 38. Event Mechanism
- 41. Event Mechanism
- 47. Event Mechanism
- 54. Event Mechanism Same Parameters? ≠ ≠
- 55. Event Mechanism
- 56. Event Mechanism Sequence of Multiple Listeners
- 57. Event Mechanism Sequence of Multiple Listeners
- 58. Event Mechanism Sequence of Multiple Listeners
- 59. Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)
- 60. Event Mechanism Sequence of Multiple Listeners alert(1) Queue alert(2)
- 61. Event Mechanism Sequence of Multiple Listeners alert(1) Queue alert(2)
- 62. Event Mechanism Sequence of Multiple Listeners alert(2) alert(1) Queue alert(1) alert(2)
- 63. Event Mechanism Sequence of Multiple Listeners alert(2) alert(1) Queue Stack alert(1) alert(2)
- 64. Event Mechanism
- 67. Event Mechanism
- 68. Event Mechanism Turn Bubbling Off
- 69. Event Mechanism Turn Bubbling Off
- 70. Event Mechanism
- 75. Event Mechanism Event Target Target will always be element2
- 76. Event Mechanism Event Target Target will always be element2 e.currentTarget
- 77. Event Mechanism Event Target Target will always be element2 e.currentTarget
- 78. Event Mechanism Event Target Target will always be element2 e.currentTarget
- 79. Event Mechanism
- 80. Event Mechanism “This” in Event
- 81. 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
- 82. 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
- 83. 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
- 84. 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
- 85. 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
- 86. 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
- 87. 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
- 88. 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
- 89. 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
- 90. 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
- 91. 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
- 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 Example: Register click handler on div1
- 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. Implement an Event Library
- 98. Implement an Event Library Version One
- 99. Implement an Event Library Version One
- 100. Implement an Event Library
- 101. Implement an Event Library Version Two: “this”
- 102. Implement an Event Library Version Two: “this”
- 103. Implement an Event Library
- 104. Implement an Event Library Version Three: e and data
- 105. Implement an Event Library Version Three: e and data
- 106. Implement an Event Library Version Three: e and data
- 107. Implement an Event Library
- 108. Implement an Event Library Version Three: Combine e and data
- 109. Implement an Event Library Version Three: Combine e and data
- 110. Implement an Event Library Version Three: Combine e and data
- 111. Implement an Event Library Version Three: Combine e and data
- 112. Implement an Event Library Version Three: Combine e and data TODO: Encapsulate the original event object
- 113. Implement an Event Library Version Three: Combine e and data TODO: Encapsulate the original event object
- 116. Acknowledge
- 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/
- 118. Thanks!
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n