Lesson 2 Event Handling. Object Event Handlers Most of the objects that make up the Document Object...

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=bt1 type=button value=ok onClick=“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, 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

<img name=ball src=images/ball.gif onAbort=“alert(‘You missed a nice picture’)”>

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

<form>

Color: <select onChange=“processSelection()”>

<option value=“R”>Red

<option value=“G”>Green

<option value=“B”>Blue

</select>

</form>

onClick

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

<input type=button name=btn1 value=“Click Me” onClick=“alert(‘button was clicked’;” >

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.

<body bgcolor=“lightgrey” onBlur=“document.bgColor=‘black’ onFocus=“document.bgColor=‘white’” >

onLoad

• 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 onLoad=“startAnimation(this)”>

onMouseOut and onMouseOver

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

<form onReset=“alert(‘the form has been reset’)” >

onSelect

• 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 onSelect=“showHelp()” >

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

<body onUnload=“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

link anchor layer form applet image area

history document location toolbar

text radio button fileUpload select

textarea

password

checkbox reset

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.

Lesson 2 Event Handling. Object Event Handlers Most of the objects that make up the Document Object...

Documents

Transcript of Lesson 2 Event Handling. Object Event Handlers Most of the objects that make up the Document Object...