Login | Contact Us | Site Map | Resources

Other HTML Elements

Home > HTML Tutorial > HTML Events

HTML Events

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

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

Keyboard Events

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

Mouse Events

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

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

Events In Action

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.