Events are actions that take place in your browser, normally triggered by the visitor's use of the keyboard or mouse. Events are processed by a script, usually Javascript, that is written to perform a specific action or sequence of actions when the event occurs. Most events require some knowledge of Javascript.

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.

Events are better known as "event handler content attributes", as they are actually the HTML attributes used to identify events and handle what action/script is triggered when an event happens. 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

Window Events

Window event attributes work inside of the body element.

Attribute	Value	When Is Event Triggered?
onafterprint	Script	Script is Executed After a Document is Printed
onbeforeprint	Script	Script is Executed Before a Document Is Printed
onbeforeunload	Script	Script is Executed When Document Is About to Be Unloaded
onerror	Script	Script is Executed When Error Occurs
onhashchange	Script	Script is Executed When URL Anchor Changes
onload	Script	Script is Executed When A Document Loads
onmessage	Script	Script is Executed When Message is Triggered
onoffline	Script	Script is Executed When Browser Starts to Work Offline
ononline	Script	Script is Executed When Browser Starts to Work Online
onpagehide	Script	Script is Executed When User Navigates Away From Page
onpageshow	Script	Script is Executed When User Navigates To Page
onpopstate	Script	Script is Executed When Window's History Changes
onresize	Script	Script is Executed When Browser Window Is Resized
onstorage	Script	Script is Executed When Web Storage Area Is Updated
onunload	Script	Script is Executed When A Document Unloads

Keyboard Events

Keyboard event attributes work on of all of the basic HTML elements inside the body of the document.

Attribute	Value	When Is Event Triggered?
onkeydown	Script	Script is Executed When A Key Is Released
onkeypress	Script	Script is Executed When A Key Is Pressed
onkeyup	Script	Script is Executed When A Key Is Pressed & Released

Clipboard Events

Clipboard event attributes work on of all of the basic HTML elements inside the body of the document.

Attribute	Value	When Is Event Triggered?
oncopy/td>	Script	Script is Executed When User Copies An Element’s Content
oncut	Script	Script is Executed When User Cuts An Element’s Content
onpaste	Script	Script is Executed When User Pastes Content Into An Element

Mouse Events

Mouse event attributes work on of all of the basic HTML elements inside the body of the document.

Attribute	Value	When Is Event Triggered?
onclick	Script	Script is Executed When Mouse Is Clicked
ondblclick	Script	Script is Executed When Mouse Is Double-Clicked
onmousedown	Script	Script is Executed When Mouse Button Is Pressed
onmousemove	Script	Script is Executed When Mouse Button Is Moved
onmouseout	Script	Script is Executed When Mouse Pointer Is Moved Out of An Element
onmouseover	Script	Script is Executed When Mouse Pointer Is Moved Over An Element
onmouseup	Script	Script is Executed When Mouse Button Is Released
onwheel	Script	Script is Executed When Mouse Wheel Rolls Over An Element
onshow	Script	Script is Executed When Contextmenu Event Triggers An Element With A Contextmenu Attribute
ontoggle	Script	Script is Executed When User Opens or Closes The Element

Drag Events

Drag event attributes work on of all of the basic HTML elements inside the body of the document.

Attribute	Value	When Is Event Triggered?
ondrag	Script	Script is Executed When An Element Is Dragged
ondragend	Script	Script is Executed When A Drag Operation Finishes
ondragenter	Script	Script is Executed When An Element Has Been Dragged to A Valid Drop Target
ondragleave	Script	Script is Executed When An Element Leaves A Valid Drop Target
ondragover	Script	Script is Executed When An Element Is Being Dragged Over A Valid Drop Target
ondragstart	Script	Script is Executed When A Drag Operation Starts
ondrop	Script	Script is Executed When A Dragged Element Is Being Dropped
onscroll	Script	Script is Executed When An Element's Scrollbar Is Being Scrolled

Form Events

Form event attributes only work inside of form elements.

Attribute	Value	When Is Event Triggered?
onblur	Script	Script is Executed When Element Loses Focus
onchange	Script	Script is Executed When Element Changes
oncontextmenu	Script	Script is Executed When A Context Menu Is Triggered
onfocus	Script	Script is Executed When Element Gets Focus
oninput	Script	Script is Executed When An Element Gets User Input
oninvalid	Script	Script is Executed When An Element Is Invalid
onreset	Script	Script is Executed When Form Is Reset
onsearch	Script	Script is Executed When User Writes In Search Field
onselect	Script	Script is Executed When Element Is Selected
onsubmit	Script	Script is Executed When Form Is Submitted

Media Events

Media event attributed work inside of media elements such as audio, images, and video.

Attribute	Value	When Is Event Triggered?
onabort	Script	Script is Executed On Abort
oncanplay	Script	Script is Executed When A File Is Buffered Enough to Start Playing
oncanplaythrough	Script	Script is Executed When A File Is Buffered All the Way to the End
oncuechange	Script	Script is Executed When the Cue Changes In A Element
ondurationchange	Script	Script is Executed When Media Length Changes
onemptied	Script	Script is Executed When File Is Unavailable
onended	Script	Script is Executed When Media Is At the End
onerror	Script	Script is Executed When An Error Occurs When File Is Loading
onloadeddata	Script	Script is Executed When Media Data Is Loaded
onloadedmetadata	Script	Script is Executed When Meta Data Is Loaded
onloadstart	Script	Script is Executed When Media Begins to Load
onpause	Script	Script is Executed When Media Is Paused
onplay	Script	Script is Executed When Media Is Ready to Play
onplaying	Script	Script is Executed When Media Starts Playing
onprogress	Script	Script is Executed When Browser Is Getting Media Data
onratechange	Script	Script is Executed Each Time the Playback Rate Changes
onseeked	Script	Script is Executed When the Seeking Attribute Is Set to False
onseeking	Script	Script is Executed When the Seeking Attribute Is Set to True
onstalled	Script	Script is Executed When the Browser Is Unable to Fetch Media Data
onsuspend	Script	Script is Executed When Media Data Fetching Is Stopped Before Completion
ontimeupdate	Script	Script is Executed When Playing Position Changes
onvolumechange	Script	Script is Executed Each Time the Volume Changes
onwaiting	Script	Script is Executed When Media Pauses

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.