JavaScript User-Created Events
|
Virtually everything a visitor does when he visits a site generates an event—from clicking with the mouse to selecting text on a Web page. This allows you to use JavaScript as an eventdriven language. Because the basic events presented in the previous section run automatically, they could be considered sequential events. The events presented in this section only happen because of something the user does in the Web site. The names and descriptions of all usercreated events are as follows:
-
OnAbort. This event is triggered when the user interrupts the transfer of data to the browser, such as by pressing the Stop button.
-
onBlur. This event is triggered when an element loses focus, either because the user clicked outside of the element's bounds or because he or she hit the Tab key.
-
onBounce. This event is triggered when then contents of a MARQUEE element has reached the edge of the page.
-
onChange. This event is triggered when an element loses focus after the contents of the element have changed. An example of this is changing the contents of a text field on a form then clicking the Submit button.
-
onClick. This event is triggered when the user presses and releases the mouse button or keyboard equivalent.
-
onDblclick. This event is triggered when the user double-clicks a mouse button.
-
onDragDrop. This event is triggered when the user drags a desktop icon into the browser window.
-
onDragStart. This event is triggered when the user begins selecting elements on the page.
-
onFocus. This event is triggered when an element gains focus.
-
onHelp. This event is triggered when the user presses the F1 key or chooses Help from the browser window.
-
onKeyDown. This event is triggered when the user begins pressing a key on the keyboard.
-
onKeyPress. This event is triggered when the user presses and releases a key on the keyboard.
-
onKeyUp. This event is triggered when the user releases a key on the keyboard.
-
onMouseDown. This event is triggered when the user begins pressing a mouse button.
-
onMouseMove. This event is triggered when the user moves the mouse cursor.
-
onMouseOut: This event is triggered when the user takes the mouse cursor outside of the browser or element bounds.
-
onMouseOver. This event is triggered when the user positions the mouse cursor over an element.
-
onMouseUp. This event is triggered when the user releases a mouse button.
-
onMove. This event is triggered when the user moves the browser window.
-
onReset. This event is triggered when the user clicks the Reset button.
-
onResize. This event is triggered when the user resizes the browser window.
-
onRowEnter. This event is triggered when the data in a databound object has changed in the current row.
-
onRowExit. This event is triggered when the data in a databound object is about to change in the current row.
-
onScroll. This event is triggered when the user adjusts an element's scroll bar.
-
onSelect. This event is triggered when the user selects text in either an INPUT or TEXTAREA element.
-
onSelectStart This event is triggered when the user is beginning to select an element.
-
onSubmit. This event is triggered when the user clicks the Submit button on a form.
User-Created Event Examples
Take a look at the example below, which captures two of the most commonly used events. This example captures both key presses and mouse button events.
<html> <head> <title> JavaScript Professional Projects - User Created Events </title> </head> <body onKeyDown="JavaScript: alert( "Key Down" );" onMouseDown="JavaScript: alert( "Mouse Down" );"> <center> <font size=6>JavaScript Professional Projects</font><br> <font size=4>Chapter 3: User Created Events</font> </center> </body> </html>
Each time the user of this Web page clicks with the mouse or types a key an alert box is created that tells the type of event.
The example below performs all the operations you would expect from a simple calculator. It demonstrates the use of some of the user-defined events:
<html> <head> <title>Numeric Calculator</title> <style type="text/css"> <!-- input{ font-family: monospace; } --> </style> <script language="JavaScript"> <!-- window.onerror = handleError; function handleError() { document.CalcForm.Display.value = "Error"; } function append( c ) { document.CalcForm.Display.value = document.CalcForm.Display.value + c; } function calculate( expression ) { var answer = eval( expression ); if( answer != undefined ) { return( answer ); } else { return( "Error" ); } } // --> </script> </head> <body> <center> <font size=6>JavaScript Professional Projects</font><br> <font size=4>Chapter 6: User Created Events</font> </center> <br><br> <form name="CalcForm"> <table style="border-collapse: collapse" bordercolor="#111111" cellpadding="2" border="1"> <tr> <td colspan="4"><center> <input name="Display" size="30"> </center></td> </tr> <tr> <td bordercolor="#FFFFFF"> <input type="button" value=" 7 " onClick="javascript: append( "7" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" 8 " onClick="javascript: append( "8" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" 9 " onClick="javascript: append( "9" );"> </td> <td align="right" bordercolor="#FFFFFF"> <input type="button" value=" + " onClick="javascript: append( "+" );"> </td> </tr> <tr> <td bordercolor="#FFFFFF"> <input type="button" value=" 4 " onClick="javascript: append( "4" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" 5 " onClick="javascript: append( "5" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" 6 " onClick="javascript: append( "6" );"> </td> <td align="right" bordercolor="#FFFFFF"> <input type="button" value=" " onClick="javascript: append( "-" );"> </td> </tr> <tr> <td bordercolor="#FFFFFF"> <input type="button" value=" 1 " onClick="javascript: append( "1" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" 2 " onClick="javascript: append( "2" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" 3 " onClick="javascript: append( "3" );"> </td> <td align="right" bordercolor="#FFFFFF"> <input type="button" value=" * " onClick="javascript: append( "*" );"> </td> </tr> <tr> <td bordercolor="#FFFFFF"> <input type="button" value=" 0 " onClick="javascript: append( "0" )"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" " onClick="javascript: append( "-" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" . " onClick="javascript: append( "." );"> </td> <td align="right" bordercolor="#FFFFFF"> <input type="button" value=" / " onClick="javascript: append( "/" );"> </td> </tr> <tr> <td bordercolor="#FFFFFF"> <input type="button" value=" ( " onClick="javascript: append( "(" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" ) " onClick="javascript: append( ")" );"> </td> <td bordercolor="#FFFFFF"> <input type="button" value=" C " onClick="javascript: document.CalcForm.Display.value=''"> </td> <td align="right" bordercolor="#FFFFFF"> <input type="button" value=" = " onClick="javascript:document.CalcForm.Display.value= calculate( document.CalcForm.Display.value );"> </td> </tr> </table> </form> </body> </html> This example makes use of the onClick event for each of the buttons and also the onError event to correct any errors that occur.
|
EAN: 2147483647
Pages: 130