Dive Into Javascript Event      chengjing@taobao.com
Dive Into Javascript Event      chengjing@taobao.com
OutlineEvent TypeEvent MechanismImplement an Event Library
Event Type
Event TypeInterface Events   scroll resize focus blue ...
Event TypeInterface Events   scroll resize focus blue ...Mouse Events       mouseover mouseout ...
Event TypeInterface Events   scroll resize focus blue ...Mouse Events       mouseover mouseout ...Form Events        submi...
Event TypeInterface Events   scroll resize focus blue ...Mouse Events       mouseover mouseout ...Form Events        submi...
Event TypeInterface Events   scroll resize focus blue ...Mouse Events       mouseover mouseout ...Form Events        submi...
Mouse Event
Mouse Event      dblclick              clickmousedown mousemove mouseover mouseout
Mouse Event      dblclick              clickmousedown mousemove mouseover mouseout         mouseenter mouseleave
Mouse Event
Mouse Event
Event Mechanism
Event Mechanism
Event Mechanism   Click
Event Mechanism
Event Mechanism
Event Mechanism
Event Mechanism
Event Mechanism
Event Mechanism
Event Mechanism
Event Mechanism
Event MechanismEvent Registration
Event MechanismEvent Registration
Event MechanismEvent Registration
Event MechanismEvent Registration
Event MechanismEvent Registration
Event MechanismEvent Registration
Event MechanismEvent Registration
Event Mechanism
Event MechanismEvent Registration
Event MechanismEvent Registration
Event Mechanism
Event MechanismAttention!
Event MechanismAttention!
Event MechanismAttention!Same Parameters?
Event MechanismAttention!Same Parameters?
Event MechanismAttention!Same Parameters?
Event Mechanism
Event MechanismSame Parameters?
Event MechanismSame Parameters?
Event MechanismSame Parameters?
Event MechanismSame Parameters?                   ≠
Event MechanismSame Parameters?                   ≠
Event MechanismSame Parameters?                   ≠
Event MechanismSame Parameters?                   ≠                   ≠
Event Mechanism
Event MechanismSequence of Multiple Listeners
Event MechanismSequence of Multiple Listeners
Event MechanismSequence of Multiple Listeners
Event MechanismSequence of Multiple Listeners  alert(1)  alert(2)
Event MechanismSequence of Multiple Listeners  alert(1)             Queue  alert(2)
Event MechanismSequence of Multiple Listeners  alert(1)             Queue  alert(2)
Event MechanismSequence of Multiple Listeners                                 alert(2)  alert(1)             Queue        ...
Event MechanismSequence of Multiple Listeners                                 alert(2)  alert(1)             Queue      St...
Event Mechanism
Event MechanismEvent Object
Event MechanismEvent Object
Event Mechanism
Event MechanismTurn Bubbling Off
Event MechanismTurn Bubbling Off
Event Mechanism
Event MechanismEvent Target
Event MechanismEvent Target
Event MechanismEvent Target
Event MechanismEvent Target
Event MechanismEvent Target               Target will               always be               element2
Event MechanismEvent Target                  Target will                  always be                  element2e.currentTarget
Event MechanismEvent Target                  Target will                  always be                  element2e.currentTarget
Event MechanismEvent Target                  Target will                  always be                  element2e.currentTarget
Event Mechanism
Event Mechanism“This” in Event
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Event Mechanism   “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather...
Implement an Event Library
Implement an Event LibraryVersion One
Implement an Event LibraryVersion One
Implement an Event Library
Implement an Event LibraryVersion Two: “this”
Implement an Event LibraryVersion Two: “this”
Implement an Event Library
Implement an Event LibraryVersion Three: e and data
Implement an Event LibraryVersion Three: e and data
Implement an Event LibraryVersion Three: e and data
Implement an Event Library
Implement an Event LibraryVersion Three: Combine e and data
Implement an Event LibraryVersion Three: Combine e and data
Implement an Event LibraryVersion Three: Combine e and data
Implement an Event LibraryVersion Three: Combine e and data
Implement an Event LibraryVersion Three: Combine e and data              TODO:              Encapsulate the original      ...
Implement an Event LibraryVersion Three: Combine e and data              TODO:              Encapsulate the original      ...
Acknowledge
Acknowledge   PPK: http://www.quirksmode.org   W3C: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/   YUI Sourc...
Thanks!
Dive into javascript event
Dive into javascript event
Dive into javascript event
Dive into javascript event
Dive into javascript event
Dive into javascript event
Dive into javascript event
Upcoming SlideShare
Loading in …5
×

Dive into javascript event

1,951 views

Published on

Introduce the mechanism of javascript event

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,951
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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
  • Dive into javascript event

    1. 1. Dive Into Javascript Event chengjing@taobao.com
    2. 2. Dive Into Javascript Event chengjing@taobao.com
    3. 3. OutlineEvent TypeEvent MechanismImplement an Event Library
    4. 4. Event Type
    5. 5. Event TypeInterface Events scroll resize focus blue ...
    6. 6. Event TypeInterface Events scroll resize focus blue ...Mouse Events mouseover mouseout ...
    7. 7. Event TypeInterface Events scroll resize focus blue ...Mouse Events mouseover mouseout ...Form Events submit reset ...
    8. 8. Event TypeInterface Events scroll resize focus blue ...Mouse Events mouseover mouseout ...Form Events submit reset ...W3C Events dom manipulation...
    9. 9. Event TypeInterface Events scroll resize focus blue ...Mouse Events mouseover mouseout ...Form Events submit reset ...W3C Events dom manipulation...Microsoft Events mouseenter mouseleave...
    10. 10. Mouse Event
    11. 11. Mouse Event dblclick clickmousedown mousemove mouseover mouseout
    12. 12. Mouse Event dblclick clickmousedown mousemove mouseover mouseout mouseenter mouseleave
    13. 13. Mouse Event
    14. 14. Mouse Event
    15. 15. Event Mechanism
    16. 16. Event Mechanism
    17. 17. Event Mechanism Click
    18. 18. Event Mechanism
    19. 19. Event Mechanism
    20. 20. Event Mechanism
    21. 21. Event Mechanism
    22. 22. Event Mechanism
    23. 23. Event Mechanism
    24. 24. Event Mechanism
    25. 25. Event Mechanism
    26. 26. Event MechanismEvent Registration
    27. 27. Event MechanismEvent Registration
    28. 28. Event MechanismEvent Registration
    29. 29. Event MechanismEvent Registration
    30. 30. Event MechanismEvent Registration
    31. 31. Event MechanismEvent Registration
    32. 32. Event MechanismEvent Registration
    33. 33. Event Mechanism
    34. 34. Event MechanismEvent Registration
    35. 35. Event MechanismEvent Registration
    36. 36. Event Mechanism
    37. 37. Event MechanismAttention!
    38. 38. Event MechanismAttention!
    39. 39. Event MechanismAttention!Same Parameters?
    40. 40. Event MechanismAttention!Same Parameters?
    41. 41. Event MechanismAttention!Same Parameters?
    42. 42. Event Mechanism
    43. 43. Event MechanismSame Parameters?
    44. 44. Event MechanismSame Parameters?
    45. 45. Event MechanismSame Parameters?
    46. 46. Event MechanismSame Parameters? ≠
    47. 47. Event MechanismSame Parameters? ≠
    48. 48. Event MechanismSame Parameters? ≠
    49. 49. Event MechanismSame Parameters? ≠ ≠
    50. 50. Event Mechanism
    51. 51. Event MechanismSequence of Multiple Listeners
    52. 52. Event MechanismSequence of Multiple Listeners
    53. 53. Event MechanismSequence of Multiple Listeners
    54. 54. Event MechanismSequence of Multiple Listeners alert(1) alert(2)
    55. 55. Event MechanismSequence of Multiple Listeners alert(1) Queue alert(2)
    56. 56. Event MechanismSequence of Multiple Listeners alert(1) Queue alert(2)
    57. 57. Event MechanismSequence of Multiple Listeners alert(2) alert(1) Queue alert(1) alert(2)
    58. 58. Event MechanismSequence of Multiple Listeners alert(2) alert(1) Queue Stack alert(1) alert(2)
    59. 59. Event Mechanism
    60. 60. Event MechanismEvent Object
    61. 61. Event MechanismEvent Object
    62. 62. Event Mechanism
    63. 63. Event MechanismTurn Bubbling Off
    64. 64. Event MechanismTurn Bubbling Off
    65. 65. Event Mechanism
    66. 66. Event MechanismEvent Target
    67. 67. Event MechanismEvent Target
    68. 68. Event MechanismEvent Target
    69. 69. Event MechanismEvent Target
    70. 70. Event MechanismEvent Target Target will always be element2
    71. 71. Event MechanismEvent Target Target will always be element2e.currentTarget
    72. 72. Event MechanismEvent Target Target will always be element2e.currentTarget
    73. 73. Event MechanismEvent Target Target will always be element2e.currentTarget
    74. 74. Event Mechanism
    75. 75. Event Mechanism“This” in Event
    76. 76. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of
    77. 77. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    78. 78. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    79. 79. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    80. 80. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    81. 81. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    82. 82. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    83. 83. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    84. 84. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    85. 85. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    86. 86. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    87. 87. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    88. 88. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    89. 89. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    90. 90. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    91. 91. Event Mechanism “This” in EventIn Javascript this always refers to the “owner” ofthe function we’re executing, or rather, to theobject that a function is a method of Example: Register click handler on div1
    92. 92. Implement an Event Library
    93. 93. Implement an Event LibraryVersion One
    94. 94. Implement an Event LibraryVersion One
    95. 95. Implement an Event Library
    96. 96. Implement an Event LibraryVersion Two: “this”
    97. 97. Implement an Event LibraryVersion Two: “this”
    98. 98. Implement an Event Library
    99. 99. Implement an Event LibraryVersion Three: e and data
    100. 100. Implement an Event LibraryVersion Three: e and data
    101. 101. Implement an Event LibraryVersion Three: e and data
    102. 102. Implement an Event Library
    103. 103. Implement an Event LibraryVersion Three: Combine e and data
    104. 104. Implement an Event LibraryVersion Three: Combine e and data
    105. 105. Implement an Event LibraryVersion Three: Combine e and data
    106. 106. Implement an Event LibraryVersion Three: Combine e and data
    107. 107. Implement an Event LibraryVersion Three: Combine e and data TODO: Encapsulate the original event object
    108. 108. Implement an Event LibraryVersion Three: Combine e and data TODO: Encapsulate the original event object
    109. 109. Acknowledge
    110. 110. 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/
    111. 111. Thanks!

    ×