Presentation on theme: "Event Handling. Overview How to listen (and not listen) for events Creating a utility library (and why you should) Typology of events Pairing event listeners."— Presentation transcript:
Overview How to listen (and not listen) for events Creating a utility library (and why you should) Typology of events Pairing event listeners Cross-browser compatibility Event phases (capturing vs. bubbling) Event delegation vs. event binding
About Events Events happen all the time KEY: Determine which events you care about Typically triggers a function – Named function or anonymous function
Four Methods For Listening 1.Inline event handlers (putting it in the HTML) 2.window.onload = init; 3.window.addEventListener(‘load’, init, false); – Load is the event to be listened for – Init is the function to be called – False refers whether to watch for the Event Phase. 4.window.attachEvent(‘onload’, init); // for IE
Simplifying Event Handling Instead of wrapping this up in if-then conditional, we could just write a custom function and do some checking: – An event is a type of function – We need to know what type of event – We need to know what function to run
Using the SAME function to handle comparable events on the SAME element.
Pairing Events Click, mouseover, mouseenter (mousecentric) Touch, focus (easier to register with mobile devices)
BRIEF ASIDE ABOUT TOUCH EVENTS See Building Touch Interfaces with HTML5 by Stephen Woods for more information
Taps Vs. Clicks Touch devices still generate mouse events User taps on an element but does not leave finger on the screen – onclick fired 300ms after the tap
Taps Four types of taps related to touch 1.When touch starts (user puts finger on screen) 2.When touchpoint moves (user moves finger without removing it from screen) 3.When touch ends (user takes finger off of the screen) 4.When touch is cancelled (something, such as a notification, interrupts the touch)
Touch Events in WebKit Event NameDescriptionContains Touches Array touchstart Start of touchYes touchmove Touchpoint changesYes touchend Touch endsYes touchcancen Touch is interrupotedNo
Properties of Touch Array PropertyDescription identifier Unique identifier for this touch. As long as the user keeps the finger on the screen, this will not change. screenX The X position of the touch, relative to the left side of the device screen, regardless of scrolling. screenY The Y position, relative to the top of the screen. clientX The X position relative to the left side of the browser viewport, in subtracting any browser “chrome”. Basically the same as screenX. clientY Same as above, except it gets the Y position relative to the top of the viewport pageX The X position relative to the left of the rendered page. pageY The Y position relative to the top of the rendered page. target The element under the touchpoint when the touch is started. If the touch moves over a different element, this value does not change.
Referencing an Event Problem – You want to listen for the same event (e.g., click) but want to use it on different elements (e.g., image, link).
Referencing an Event Solution! – Reference the event!!! – IE and other browsers handle this differently