Contact Us |
Site Map |
Resources
Events are actions that take place in your browser, normally triggered by a visitor's use of the keyboard or mouse. Events are processed by a script, usually Javascript, that is written to perform a specific action when the event occurs. Most events require some knowledge of Javascript or the ability to copy and paste Javascript code that is offered freely on the web.
Events can be used to switch one image with another when your mouse hovers over it, or to validate forms when the submit button is pressed. The possibilities are endless... well, almost.
Let's take a look at the events available.
Window events work inside of the body element.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onload | Script | Event Happens (Script is Executed) When A Document Loads |
| onunload | Script | Event Happens (Script is Executed) When A Document Unloads |
Keyword events work on of all of the basic HTML elements inside the body of the document.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onkeyup | Script | Event Happens (Script is Executed) When A Key Is Released |
| onkeydown | Script | Event Happens (Script is Executed) When A Key Is Pressed |
| onkeypress | Script | Event Happens (Script is Executed) When A Key Is Pressed & Released |
Keyword events work on of all of the basic HTML elements inside the body of the document.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onmouseover | Script | Event Happens (Script is Executed) When Mouse Pointer Is Moved Over An Element |
| onmouseout | Script | Event Happens (Script is Executed) When Mouse Pointer Is Moved Out of An Element |
| onclick | Script | Event Happens (Script is Executed) When Mouse Is Clicked |
| ondblclick | Script | Event Happens (Script is Executed) When Mouse Is Double-Clicked |
| onmouseup | Script | Event Happens (Script is Executed) When Mouse Button Is Released |
| onmousedown | Script | Event Happens (Script is Executed) When Mouse Button Is Pressed |
| onmousemove | Script | Event Happens (Script is Executed) When Mouse Button Is Moved |
Form events only work inside of form elements.
| Attribute | Value | When Is Event Triggered? |
|---|---|---|
| onsubmit | Script | Event Happens (Script is Executed) When Form Is Submitted |
| onreset | Script | Event Happens (Script is Executed) When Form Is Reset |
| onselect | Script | Event Happens (Script is Executed) When Element Is Selected |
| onblur | Script | Event Happens (Script is Executed) When Element Loses Focus |
| onfocus | Script | Event Happens (Script is Executed) When Element Gets Focus |
| onchange | Script | Event Happens (Script is Executed) When Element Changes |
If you resisted clicking on the button above, click on it anyway for an example of an event in action. Let's pick apart the code that made it possible.
<input type="button" value="Don't Click Here" onclick="alert('You just couldn\'t resist, could you?');">
You might not have learned much about forms yet. They are the elements of HTML that allow your visitors to interact with the website. The form button in this example includes the "onclick" attribute with a value of "alert('');", which is a Javascript function that pops up a little alert box with text in it.
Notice what happens when you move your mouse over the image, and then back off of it? The code to trigger these actions comes in two parts.
<script type="text/javascript">
if (document.images) {
image1 = new Image
image2 = new Image
image1.src = 'duck.gif'
image2.src = 'snake.gif'
}
</script>
<span onMouseOver="document.rollover.src=image2.src" onMouseOut="document.rollover.src=image1.src">
<img src="duck.gif" name="rollover">
</span>
Both the javascript code and the image and span tags can be placed between the HTML document's body tags. You can replace the image names and paths with your own images and be switching images like a pro in no time at all.
Previous