Dive Into JavaScript Events

Describe the internal mechanism of JavaScript Events!

Transcript

1. Dive Into Javascript Event
   澄净
   chengjing@taobao.com
   Monday, September 3, 12
   

   View Slide

2. Dive Into Javascript Event
   澄净
   chengjing@taobao.com
   Monday, September 3, 12
   

   View Slide

3. Monday, September 3, 12
   

   View Slide

4. Outline
   Event Type
   Event Mechanism
   Implement an Event Library
   Monday, September 3, 12
   

   View Slide

5. Monday, September 3, 12
   

   View Slide

6. Event Type
   Monday, September 3, 12
   

   View Slide

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

   View Slide

8. Interface Events
   Event Type
   Mouse Events
   scroll resize focus blue ...
   mouseover mouseout ...
   Monday, September 3, 12
   

   View Slide

9. Interface Events
   Event Type
   Mouse Events
   scroll resize focus blue ...
   mouseover mouseout ...
   Form Events submit reset ...
   Monday, September 3, 12
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Monday, September 3, 12
    

    View Slide

13. Mouse Event
    Monday, September 3, 12
    

    View Slide

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

    View Slide

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

    View Slide

16. Monday, September 3, 12
    

    View Slide

17. Mouse Event
    Monday, September 3, 12
    

    View Slide

18. Mouse Event
    Monday, September 3, 12
    

    View Slide

19. Monday, September 3, 12
    

    View Slide

20. Event Mechanism
    Monday, September 3, 12
    

    View Slide

21. Event Mechanism
    Monday, September 3, 12
    

    View Slide

22. Event Mechanism
    Click
    Monday, September 3, 12
    

    View Slide

23. Event Mechanism
    Monday, September 3, 12
    

    View Slide

24. Event Mechanism
    Monday, September 3, 12
    

    View Slide

25. Event Mechanism
    Monday, September 3, 12
    

    View Slide

26. Event Mechanism
    Monday, September 3, 12
    

    View Slide

27. Event Mechanism
    Monday, September 3, 12
    

    View Slide

28. Event Mechanism
    Monday, September 3, 12
    

    View Slide

29. Event Mechanism
    Monday, September 3, 12
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. Event Mechanism
    Event Mechanism
    Sequence of Multiple Listeners
    alert(1)
    alert(2)
    Monday, September 3, 12
    

    View Slide

60. Event Mechanism
    Event Mechanism
    Sequence of Multiple Listeners
    alert(1)
    alert(2)
    Queue
    Monday, September 3, 12
    

    View Slide

61. Event Mechanism
    Event Mechanism
    Sequence of Multiple Listeners
    alert(1)
    alert(2)
    Queue
    Monday, September 3, 12
    

    View Slide

62. Event Mechanism
    Event Mechanism
    Sequence of Multiple Listeners
    alert(1)
    alert(2)
    alert(2)
    alert(1)
    Queue
    Monday, September 3, 12
    

    View Slide

63. Event Mechanism
    Event Mechanism
    Sequence of Multiple Listeners
    alert(1)
    alert(2)
    alert(2)
    alert(1)
    Queue Stack
    Monday, September 3, 12
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. Event Mechanism
    Event Mechanism
    Event Target
    Target will
    always be
    element2
    Monday, September 3, 12
    

    View Slide

76. Event Mechanism
    Event Mechanism
    Event Target
    Target will
    always be
    element2
    e.currentTarget
    Monday, September 3, 12
    

    View Slide

77. Event Mechanism
    Event Mechanism
    Event Target
    Target will
    always be
    element2
    e.currentTarget
    Monday, September 3, 12
    

    View Slide

78. Event Mechanism
    Event Mechanism
    Event Target
    Target will
    always be
    element2
    e.currentTarget
    Monday, September 3, 12
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

108. Implement an Event Library
     Version Three: Combine e and data
     Monday, September 3, 12
     

     View Slide

109. Implement an Event Library
     Version Three: Combine e and data
     Monday, September 3, 12
     

     View Slide

110. Implement an Event Library
     Version Three: Combine e and data
     Monday, September 3, 12
     

     View Slide

111. Implement an Event Library
     Version Three: Combine e and data
     Monday, September 3, 12
     

     View Slide

112. Implement an Event Library
     Version Three: Combine e and data
     TODO:
     Encapsulate the original
     event object
     Monday, September 3, 12
     

     View Slide

113. Implement an Event Library
     Version Three: Combine e and data
     TODO:
     Encapsulate the original
     event object
     Monday, September 3, 12
     

     View Slide

114. Monday, September 3, 12
     

     View Slide

115. Monday, September 3, 12
     

     View Slide

116. Acknowledge
     Monday, September 3, 12
     

     View Slide

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
     

     View Slide

118. Thanks!
     Monday, September 3, 12
     

     View Slide