Services

Featured Sites

24K Music Videos

HTML Events

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.