|
onabort
|
<img>; image load aborted
|
|
onblur
|
<body> and form elements; window or element loses keyboard focus
|
|
onchange
|
Form elements; displayed value changes
|
|
onclick
|
All elements; mouse press and release; return false to cancel
|
|
ondblclick
|
All elements; mouse double-click
|
|
onerror
|
<img>; image loading fails
|
|
onfocus
|
<body> and form elements; window or element gets keyboard focus
|
|
onkeydown
|
<body> and form elements; key pressed; return false to cancel
|
|
onkeypress
|
<body> and form elements; key pressed and released; return false to cancel
|
|
onkeyup
|
<body> and form elements; key released
|
|
onload
|
<body>, <frameset>, <img>, <iframe>, <object>; document, image, or object completely loaded
|
|
onmousedown
|
All elements; mouse button pressed
|
|
onmousemove
|
All elements; mouse pointer moved
|
|
onmouseout
|
All elements; mouse moves off element
|
|
onmouseover
|
All elements; mouse moves over element; return true to prevent link URL display in status bar
|
|
onmouseup
|
All elements; mouse button released
|
|
onreset
|
<form>; form reset requested; return false to prevent reset
|
|
onresize
|
<body>, <frameset>; window size changes
|
|
onsubmit
|
<form>; form submission requested; return false to prevent submission
|
|
onunload
|
<body>, <frameset>; document unloaded
|
Note that when the browser triggers certain event handlers, such as onclick, onmouseover and onsubmit, it examines the return value of the handler (if there is one) to determine whether it should perform the default action associated with the event or not. Typically, if an event handler returns false, the default action (such as following a hyperlink or submitting a form) is not performed. The one exception is for the onmouseover handler: when the mouse moves over a hyperlink, the browser displays the link’s URL in the status line unless the event handler returns true.
Event handlers as JavaScript functions
We’ve seen that the various document object models represent HTML tags as JavaScript objects, with the attributes of those tags as properties of the objects. The same is true of event handlers. If your HTML document includes a single <form> tag with an onsubmit event handler attribute, that event handler is available as:
document.forms[0].onsubmit
Although HTML event handler attributes are written as strings of JavaScript code, the value of the corresponding JavaScript properties are not strings of code, but actual JavaScript functions. You can create a new event handler simply by assigning a function to the appropriate property:
function validate() { // Form validation function
// check validity here
return valid; // return true or false
}
// Now check user input before submitting it
document.forms[0].onsubmit = validate; |
