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

Dive Into JavaScript Events

Goddy Zhao
September 03, 2012

Dive Into JavaScript Events

Describe the internal mechanism of JavaScript Events!

Goddy Zhao

September 03, 2012
Tweet

More Decks by Goddy Zhao

Other Decks in Technology

Transcript

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

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

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

    ... mouseover mouseout ... Form Events submit reset ... W3C Events dom manipulation... Monday, September 3, 12
  4. 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
  5. Event Mechanism Event Mechanism Sequence of Multiple Listeners alert(1) alert(2)

    alert(2) alert(1) Queue Stack Monday, September 3, 12
  6. Event Mechanism Event Mechanism Event Target Target will always be

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

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

    element2 e.currentTarget Monday, September 3, 12
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. Implement an Event Library Version Three: Combine e and data

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

    TODO: Encapsulate the original event object Monday, September 3, 12
  27. 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