Dive into javascript event

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 submit reset ...

Event TypeInterface Events scroll resize focus blue ...Mouse Events mouseover mouseout ...Form Events submit reset ...W3C Events dom manipulation...

Event TypeInterface Events scroll resize focus blue ...Mouse Events mouseover mouseout ...Form Events submit reset ...W3C Events dom manipulation...Microsoft Events mouseenter mouseleave...

Mouse Event

Mouse Event dblclick clickmousedown mousemove mouseover mouseout

Mouse Event dblclick clickmousedown mousemove mouseover mouseout mouseenter mouseleave

Mouse Event

Event Mechanism

Event Mechanism Click

Event Mechanism

Event MechanismEvent Registration

Event Mechanism

Event MechanismEvent Registration

Event Mechanism

Event MechanismAttention!

Event MechanismAttention!Same Parameters?

Event Mechanism

Event MechanismSame Parameters?

Event MechanismSame Parameters? ≠

Event MechanismSame Parameters? ≠ ≠

Event Mechanism

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(2) alert(1) Queue alert(1) alert(2)

Event MechanismSequence of Multiple Listeners alert(2) alert(1) Queue Stack alert(1) alert(2)

Event Mechanism

Event MechanismEvent Object

Event Mechanism

Event MechanismTurn Bubbling Off

Event Mechanism

Event MechanismEvent Target

Event MechanismEvent Target Target will always be element2

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, to theobject that a function is a method of

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

Implement an Event Library

Implement an Event LibraryVersion One

Implement an Event LibraryVersion Two: “this”

Implement an Event LibraryVersion Three: 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 event object

Acknowledge

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/

Thanks!

Dive into javascript event

by goddy zhao on Dec 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 3

Statistics

Dive into javascript event — Presentation Transcript

http://paper.li	2
http://twitter.com	1