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 –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, help”);

Events onAbort onBlur onChange onClick onError onFocus onLoad onMouseOut onMouseOver onReset onSelect onSubmit onUnload

onAbort Activated when a user aborts the loading of an image

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

onChange Used with select, text and textarea objects use instead of onBlur to validate only if a value has changed Color: Red Green Blue

onClick Used with button, checkbox,link, radio, reset, and submit objects.

onError 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 JavaScript generated errors

onFocus Used with frame, select, text, textarea and window objects. Just the opposite of onBlur; i.e. invoked when the object gets focus.

onLoad Used with window, frame and image objects (use with and ) Activated when the body, frameset, or image is loaded

onMouseOut and onMouseOver Used with area and link objects user moves mouse off of an area or link <area name=top coords=“0,0,200,300 href=“javascript:displayMessage()” onMouseOver=“self.status=‘when you see this message click your left mouse button’ ; return true” onMouseOut=“self.status = ‘’ ; return true”>

onReset Used with form objects

onSelect Used with text and textarea objects run some Javascript whenever a user selects a piece of text in a text or textarea object

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

onUnload Just like onLoad but the handler is run when the window/frame is exited

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 linkanchorlayerformappletimagearea historydocumentlocationtoolbar textradiobuttonfileUploadselect textarea password checkboxreset submit option

Capturing Events (cont) Window, document and layers all have a captureEvents( ) 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.captureEvents(Event.KEYPRESS) –window.captureEvents(Event.KEYPRESS) | Event.CLICK) assign a function to handle the captured event –window.onClick = processClick

Turning event capture off To turn event capture off use the releaseEvents( ) method use the same parameters as captureEvents( )

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

handleEvent The handleEvent(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 routeEvent and captureEvent 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.