Chapter 14: Dynamic HTML: Event Model Presented by: Colbie Brown CS340 Java Web Development Dr. Gloria Carter Love

TABLE OF SLIDES oINTRODUCTION oEVENTONCLICK oEVENTONLOAD oERROR HANDLING WITH ONERROR oTRACKING THE MOUSE WITH EVENT ONMOUSEMOVE oROLLOVERS WITH ONMOUSEOVER AND ONMOUSEOUT oFORM PROCESSING WITH ONFOCUS AND ONBLUR oMORE FORM PROCESSING WITH ONSUBMIT AND ONRESET oSUMMARY oREFERENCES

INTRODUCTION We have seen that XHTML pages can be controlled via scripting. Dynamic HTML with the event model exists so that scripts can respond to user interactions and change the page accordingly. This makes Web applications more responsive and user friendly and can reduce server load.

INTRODUCTION With the even model, scripts can respond to a user who is moving the mouse, scrolling up or down the screen or entering keystrokes. Content becomes more dynamic, while interfaces become more intuitive. In this chapter, we will discuss how to use the event model to respond to user actions. Examples are given of event handling and useful events, which range from mouse capture to error handling to form processing.

EVENTONCLICK One of the most common events is onclick. When the user clicks a specific item with the mouse, the onclick event fires. With JavaScript, we are able to respond to onclick and other events. Below is an example of simple event handling for the onclick event. Figure 14.1

EVENTONLOAD The onload event fires whenever an element finishes loading successfully. Frequently, this event is used in the body element to initiate a script after the page loads into the client. Below is an example that uses the onload event for this purpose. The script called by the onload event updates a timer that indicates how many seconds have passed since the document was loaded. Figure 14.2

ERROR HANDLING WITH ONERROR Sometimes a script refers to objects that existed at a specified location when the script was written, but the location changes at a later time, rendering the script invalid. The error dialog presented by the browser in such a case can be confusing to the user. To prevent this dialog box from displaying and to handle errors more elegantly, scripts can use the onerror event to execute specialized error- handling code. Figure 14.3 gives an example. Figure 14.3

TRACKING THE MOUSE WITH EVENT ONMOUSEMOVE Event onmousemove fires repeatedly whenever the user moves the mouse over the Web page. The link below shows an example that uses this event to update a coordinate display that gives the position of the mouse in the coordinate system of the object containing the mouse cursor. Figure 14.4

ROLLOVERS WITH ONMOUSEOVER AND ONMOUSEOUT Two more events fired by mouse movements are onmouseover and onmouseout. When the mouse cursor moves over an element, an onmouseover event occurs for that element. When the mouse cursor leaves the element, an onmouseout event occurs for that element. The link below uses these events to achieve a rollover effect that updates text when the mouse cursor moves over it. Thus, a technique for creating rollover images is also introduced. Figure 14.6

FORM PROCESSING WITH ONFOCUS AND ONBLUR The onfocus and onblur events are particularly useful when dealing with form elements that allow user input. The onfocus event fires when an element gains focus and onblur fires when an element loses focus, which occurs when another control gains the focus. Figure 14.7

MORE FORM PROCESSING WITH ONSUBMIT AND ONRESET Two more useful events for processing forms are onsubmit and onreset. These events fire when a form is submitted or reset. The function formSubmit executes in response to the user submitting the form. Figure 14.8

SUMMARY oThe event model allows scripts to respond to user actions and change a page accordingly. oThis makes Web applications responsive and user friendly and can greatly lessen server load but can cause compatibility problems. oWith the event model, scripts can respond to a user moving the mouse, scrolling up or down the screen or entering keystrokes. Content becomes more dynamic, and interfaces become more intuitive. oOne of the most common events is onclick. When the user clicks the mouse, onclick fires. oEvent onmousemove fires constantly whenever the mouse is in motion. oThe event object contains information about the triggered event.

REFERENCES Internet & World Wide Web: How To Program 3 rd Ed. Companion Website: ANY QUESTIONS???