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 Listening1. 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 Device Browser Keyboard Form

mousedownmouseupclick

mouseoutmouseovermousemove

loadunloadresizescrollcopycutpaste

keydownkeypresskeyup

submitchangefocusblurselect

Many additional events are possible.

http://www.w3schools.com/tags/ref_eventattributes.asp

Example Code Using Utility Library

When a value is changed, call the limitText function

Pairing Events

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 Name Description Contains Touches Array

touchstart Start of touch Yes

touchmove Touchpoint changes Yes

touchend Touch ends Yes

touchcancen Touch is interrupoted No

Properties of Touch ArrayProperty Descriptionidentifier 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