Handling Events - JavaScript by Example - page 525

Exercises
1. Create three buttons, labeled Shoot movies , Shoot guns , and Shoot basketballs .
When the user clicks any button, use the onClick event handler to call a func-
tion that will send a message based on which button was pressed.
2. Create a form that contains two text fields to receive the user's name and
address. When the user leaves each text field, use the onBlur event handler to
check if the user entered anything in the respective field. If the user didn't, send
an alert telling him or her so, and use the focus() method to return focus back
to the text field the user just left.
3. Make a link that changes the background color to light blue when the mouse
pointer is rolled over it.
4. Create a form that will contain a textbox. After the user enters text, all the let-
ters will be converted to lowercase as soon as he or she clicks anywhere else in
the form. (Use the onChange event handler.)
5. Write a script that will detect what event occurred and the pixel positions of a
mouse when it rolls over a hotspot in an image map.
6. Create a text field in a form. When the user clicks on a button, a function will
be called to make sure the field is not empty. In a JavaScript program use the
document.getElementByIdI() method to get a reference to the button object. Use
the onclick event property.
7. Write the HTML part of this script to test capturing and bubbling for your
browser. Explain the order of event handling.
document.onclick = function(){
alert("Document clicked!");
};
function buttonClick(){
alert("Button clicked!");
}
function formClick(){
alert("Form clicked!");
}
8. Rewrite Example 13.5 using the scripting method. The onload event handler
will be used as a property of the window object. The definition of the now()
function will be the value assigned to the event handler; it will be anonymous.