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 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

Checking for Version

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

Creating a Utility Library You will be reusing a lot of the functions over and over, as well as listening for different types of events. Why not put them into a utility library?

Instead of writing document.getElementById() every time, you can just use $() to gain access to the id element (similar to jQuery) See page 159 for a review on typeof evaluator

Make sure to separate your object items with a comma (except for the last one)

You can use the code from earlier to create the add event function. Just copy and paste.

You will also want to create a way to stop listening for an event. All you need to do is change the word from add or attach(IE) to remove or detach.(IE)

Don’t forget your closing semi-colon for the object U.

Event Types Input DeviceBrowserKeyboardForm mousedown mouseup click mouseout mouseover mousemove load unload resize scroll copy cut paste keydown keypress keyup submit change focus blur select Many additional events are possible.

Example Code Using Utility Library When a value is changed, call the limitText function

Pairing Events

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   

Comparison of Browsers

Solution

Why care about the event? It gives us an event object, which contains useful property information – type property (tells us what event occurred, such as click, resize, blur, etc.)

PREVENTING DEFAULT BEHAVIOR

EVENT PHASES