Lesson 2 Event Handling Object Event Handlers Most

Lesson 2 Event Handling

Object Event Handlers • Most of the objects that make up the Document Object Model respond to asynchronous, user generated events through predefined event handlers that handle the event and transfer control to a user provided event handling function • Each object has particular events that they will respond to • the way you specify an event handler is by adding an additional attribute to the HTML tag that specifies the event and the particular handler • <input name=bt 1 type=button value=ok on. Click=“acb( ); ”> – if the button is click the function abc( ) will be run

Alert The “Alert” function is useful in user notification and debugging of Javascripts. Pops up a message in a pop-up dialog box Ex, alert(“help, help”);

Events • • • • on. Abort on. Blur on. Change on. Click on. Error on. Focus on. Load on. Mouse. Out on. Mouse. Over on. Reset on. Select on. Submit on. Unload

on. Abort • Activated when a user aborts the loading of an image <img name=ball src=images/ball. gif on. Abort=“alert(‘You missed a nice picture’)”>

on. Blur • Used with frame, select, textarea and window objects • invoked when an object loses focus • use with select, text and textarea for data validation

on. Change • Used with select, text and textarea objects • use instead of on. Blur to validate only if a value has changed <form> Color: <select on. Change=“process. Selection()”> <option value=“R”>Red <option value=“G”>Green <option value=“B”>Blue </select> </form>

on. Click • Used with button, checkbox, link, radio, reset, and submit objects. <input type=button name=btn 1 value=“Click Me” on. Click=“alert(‘button was clicked’; ” >

on. Error • Used with image and window objects to invoke a handler if an error occurs while an image or window is loading. • Setting window. onerror = null will prevent users from seeing Java. Script generated errors

on. Focus • Used with frame, select, textarea and window objects. • Just the opposite of on. Blur; i. e. invoked when the object gets focus. <body bgcolor=“lightgrey” on. Blur=“document. bg. Color=‘black’ on. Focus=“document. bg. Color=‘white’” >

on. Load • Used with window, frame and image objects (use with <body …. ><frameset …. > and <img. . . >) • Activated when the body, frameset, or image is loaded <img name=spinball src=images/spinball. gif on. Load=“start. Animation(this)”>

on. Mouse. Out and on. Mouse. Over • Used with area and link objects • user moves mouse off of an area or link <map name=flower> <area name=top coords=“ 0, 0, 200, 300 href=“javascript: display. Message()” on. Mouse. Over=“self. status=‘when you see this message click your left mouse button’ ; return true” on. Mouse. Out=“self. status = ‘’ ; return true”>

on. Reset • Used with form objects <form on. Reset=“alert(‘the form has been reset’)” >

on. Select • Used with text and textarea objects • run some Javascript whenever a user selects a piece of text in a text or textarea object <input type=text name=line on. Select=“show. Help()” >

on. Submit • Use with form objects to run a handler whenever a form has been submitted. • Usefull to validate all fields prior to actual submission

on. Unload • Just like on. Load but the handler is run when the window/frame is exited <body on. Unload=“cleanup()” >

Advanced Event Handling • Previous events are event objects caused as a result of interaction with forms tags • There is another Event object made necessary by the advent of Dynamic HTML – allows a more powerful way of trapping and processing events

The Event Object • Provides a set of properties (no methods) that event handling routines use as constants – property group 1 (modifier keys) • Alt – Event. ALT_MASK • Ctrl – Event. CONTROL_MASK • Shift – Event. SHIFT_MASK • Meta (Windows key, or Command key on Mac) – Event. META_MASK – property group 2 (other event types) • one property for each event type in DOM – ex. Event. CLICK //generic click event

Capturing Events • Remember the hierarchy: window history link anchor textarea password layer radio checkbox document form button reset submit location applet toolbar image file. Upload select option area

Capturing Events (cont) • Window, document and layers all have a capture. Events( ) method • the methods require one or more parameters that will tell it which events to capture; do this as the page loads (head section is good) – window. capture. Events(Event. KEYPRESS) | Event. CLICK) • assign a function to handle the captured event – window. on. Click = process. Click

Turning event capture off • To turn event capture off use the release. Events( ) method • use the same parameters as capture. Events( )

Event Forwarding • Use your generalized event handler (for all clicks) to do high level processing and then allow the individual handlers do their job for the specific events by using route. Event(e) to pass the event through the hierarchy to the target handler. • This let you minimize the amount of code you would repeat in writing the handlers • this lets your events to travel through the hierarchy automatically • this works different for Netscape and Internet Explorer – in Netscape events travel down the hierarchy to the target; in IE they travel up the hierarchy (from the object to the window) – in Netscape events are only generated by forms objects and a few others; in IE almost any tag can generate an event

handle. Event • The handle. Event(e) method allows you to route and event to anywhere in the hierarcy, regardless of the hierarchy. • the object reference is the reference of the object to handle the event; passing the event object as a parameter, like route. Event and capture. Event • as long as the target object as an event handler it will process it just as if it had received it directly from the system

Problems • The event model is not standardized across all browsers, just as dynamic HTML is far from standardized. • Forewarned is forearmed, this is a place where you could really get into trouble because of browser incompatibilities.