EVENT HANDLING IN DHTML!
DHTML event model allows a Web Developer to write scripts that can respond to user interactions and change the page accordingly. This makes web applications more responsive and user friendly and can reduce server load in handling user interaction with the web page. Using the event model of DOM, scripts can respond to user interactions such as moving the mouse on a web page, scrolling up and down the screen or entering keystrokes in a text box.
Some of the most common and useful events that can be handled using DHTML event model are: onClick, onLoad, onError, onMouseMove, onMouseOver, onMouseOut, onFocus, onBlur, onSubmit, and onReset. For instance, we can handle the onreset event to prompt the user to confirm the reset operation (clearing the content of all the UI elements in a form) of the form in a web page.
Event onclick
When a user clicks on a specific item in our web page with the mouse, the onclick event fires. We can handle this event with the help of scripts written using JavaScript/VBScript. This can be done using JavaScript in one of the following two ways:
- Using the for property of the script element.
- Associating the script directly with the HTML element using its event property – onclick.
The following example illustrates the use of first method:
In the example above, 'for' property of the script element is used to specify the element to which the script applies, and 'event' property is used to specify the event for which this script has been written.
The following example shows how to handle the click event using onclick event property:
Form Events
Event onload:
The onload event fires whenever an element finishes loading (which includes all its children) successfully. Frequently, this event is used in the body element to initiate a script after the page gets loaded and displayed in the client area.
Some of the uses of onload event are:
- Used to open a popup window once the page gets loaded
- Used to trigger a script when an image or Java applet gets loaded
Event onerror:
When something goes wrong while rendering the web page on a client machine, an error dialog appears to the user stating the reason for the error. The error dialog presented by the browser can be confusing to the user sometimes. To prevent this dialog box from displaying and to handle errors more elegantly, we can use the onerror event handler to launch a script that writes error messages to the status bar of the browser.
Mouse Related Events
OnMouseMove event:
The event OnMouseMove fires repeatedly whenever the mouse moves over the web page. The location of the mouse can be trapped from within the MouseMove event handler with the help of the event object. The properties offsetx and offsety of the event object give the location of the mouse cursor relative to the left-top corner of the object on which the event was triggered. Event object contains information about any events that occur on your web page.
OnMouseOver and OnMouseOut:
OnMouseOver and OnMouseOut are mouse related events that occur due to mouse movement on the web page. 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.
While moving the cursor over an element, we can get the element’s id with the help of the event object and its srcElement property. The id property of the srcElement is the id attribute of the element on which the MouseOver event occurred.
More Form Events
OnFocus and OnBlur:
These are the events that occur on one of the form elements such as Button, Text etc. The OnFocus event fires when an element gains focus (i.e., when the user clicks a form field or when the user uses the Tab key to move between form elements) and OnBlur fires when an element looses focus (i.e., another control gains focus). With the help of these events, we can do data initialization and validation tasks.
OnSubmit and OnReset:
These events fire when a form is submitted or reset. Submit and Reset are two special buttons available in a data entry page to process the data further or to cancel.
Event Bubbling:
Event bubbling is a process managed by the event model whereby events fired in Child elements bubble up to their Parent elements for handling. If the events are to be handled only in the child and not by its parents, this process of bubbling the event to its parent can be cancelled by setting the value true to the CancelBubble property of the event object.
