Event attributes in HTML 5

This page is describing the HTML5 event attributes.

Same as with the global HTML5 attributes, to review the rest of HTML attributes, refer to the http://brenkoweb.com/tutorials/html/html-attributes. However, the HTML4 event attributes may be seen in details at these location: http://brenkoweb.com/tutorials/html/html-attributes/intrinsic-events and http://brenkoweb.com/tutorials/html/html-attributes/extended-intrinsic-events.

NOTE: The event attributes have to be accompanied with a script in order to be utilized.

Attribute characteristics and purpose:

Listed events are sorted by common usage priority and by HTML5 / older HTML selection.

Mouse Events

HTML5

ondrag attribute:

event occurs when an element is being dragged

ondragend attribute:

event occurs at the end of dragging

ondragenter attribute:

event occurs upon a dragged element has entered it's drop target

ondragleave attribute:

event occurs upon a dragged element has left it's drop target

ondragover attribute:

event occurs when a dragged element is being dragged over it's target

ondragstart attribute:

event occurs at the start of dragging

ondrop attribute:

event occurs at the moment of a dragged element being dropped

onscroll attribute:

event occurs when an element's scrollbar is being scrolled

onwheel attribute:

event occurs during the mouse wheel moving up or down

HTML4.01 and older

onclick attribute:

event occurs when a pointing device button is clicked over an element

ondblclick attribute:

occurs when a pointing device button is double clicked over an element

onmousedown attribute:

event occurs when a mouse button is pressed over an element

onmousemove attribute:

event occurs when a mouse is moved while it is over an element

onmouseout attribute:

event occurs when a mouse is moved away from an element

onmouseover attribute:

event occurs when a mouse is moved onto an element

onmouseup attribute:

event occurs when a mouse button is released over an element

Keyboard Events

HTML4.01 and older

onkeydown attribute:

event occurs when a key is pressed down over an element

onkeypress attribute:

event occurs when a key is pressed and released over an element

onkeyup attribute:

event occurs when a key is released over an element

Form Events

HTML5

oncontextmenu attribute:

event occurs when a context menu has been triggered

oninput attribute:

event occurs after an user's input (<input> fields) have been received

oninvalid attribute:

event occurs if an element input is in invalid; for instance an input field that is marked as required returns an empty field

onsearch attribute:

event occurs when an user writes something in an input field of a search type (<input type="search">)

HTML4.01 and older

onblur attribute:

event occurs when an element looses focus by the pointing device or by tabbing navigation

onchange attribute:

event occurs when a control loses the input focus and its value has been modified after gaining focus

onfocus attribute:

event occurs when an element receives focus by the pointing device or by tabbing navigation

onreset attribute:

event occurs when a form is reset

onselect attribute:

event occurs when a user selects some text in a text field

onsubmit attribute:

event occurs when a form is submitted

Window Events

NOTE: The window events mostly apply to the <body> element! It may be used for frames as well.

HTML5

onafterprint attribute:

event occurs after a document gets printed

onbeforeprint attribute:

event occurs before a document gets printed

onbeforeunload attribute:

event occurs at the moment of a document getting unloaded

onerror attribute:

event occurs when an error occurs

onhashchange attribute:

event occurs after changes have been applied to the anchor part of the an URL

onmessage attribute:

event occurs when a message has been triggered

onoffline attribute:

event occurs the browser starts operating in offline mode

ononline attribute:

event occurs the browser starts operating in online mode

onpagehide attribute:

event occurs when an user moves (navigates) away from a page

onpageshow attribute:

event occurs when an user moves (navigates) back to a page

onpopstate attribute:

event occurs after the window's history has changed

onresize attribute:

event occurs when the browser window gets resized

onstorage attribute:

event occurs when a web storage area gets updated

HTML4.01 and older

onload attribute:

event occurs when the browser finishes loading a window or all frames inside a frameset

onunload attribute:

event occurs when the browser removes a document from a window or frame

Media Events

HTML5

onabort attribute:

event occurs on media abort command

oncanplay attribute:

event occurs when a media file is ready to start playing; it waits to buffer enough for a valid play

oncanplaythrough attribute:

event occurs when a file is completely ready, and it has buffered all the way trhough

oncuechange attribute:

event occurs after a cue has changed (applies to <track> element)

ondurationchange attribute:

event occurs if the length of a media has changed

onemptied attribute:

event occurs when or if a media file becomes unavailable or somehow interrupted

onended attribute:

event occurs after the end of media has been reached

onerror attribute:

event occurs, same as with window error event (see above), when or if an error appears during loading of a file

onloadeddata attribute:

event occurs when a media's data is being loaded

onloadedmetadata attribute:

event occurs when a media's meta data are being loaded

onloadstart attribute:

event occurs at the moment of a media file initiating the loading procedure, but before it actually gets fully loaded

onpause attribute:

event occurs when a media file gets paused

onplay attirbute:

event occurs when a media is ready to be played

onplaying attribute:

event occurs when a media file is actively playing

onprogress attribute:

event occurs when a browser is reading or processing media data to be played

onratechange attribute:

event occurs when a rate of playing changes (fast forward, rewind ...)

onseeked attribute:

event occurs when an user has finished moving to a new position of the media file (seeking operation)

onseeking attribute:

event occurs when a seeking operation is active (precedes the onseeked attribute)

onstalled attribute:

event occurs if a browser is experiencing problems reaching (fetching) a media file

onsuspend attribute:

event occurs if a browser stopped reaching (fetching) a media file for some reason

ontimeupdate attribute:

event occurs if an user change the playing position of a media file (moves to another chapter or similar)

onvolumechange attribute:

event occurs whenever the playing media volume gets changed, including muting it

onwaiting attribute:

event occurs if a media has paused during regular execution, i.e. buffering more data

Clipboard Events

HTML5

oncopy attribute:

event occurs when a content (value) of an element is being copied, often used for <input /> field value copying

oncut attribute:

event occurs when a content (value) of an element is being cut, often used for <input /> field value cutting

onpaste attribute:

event occurs when a content (value) of an element is being pasted into another element, as well often used for <input /> field value pasting

Other Events

HTML5

onerror attribute:

this event has been introduced as part of window events, as well as media events, but it may also be used to trigger when an error occurs while loading an external file

onshow attribute:

event occurs when a <menu> element gets shown as a context menu

ontoggle attribute:

event occurs on toggling a <details> element (showing or hiding)

Examples:

Example with mouse ondrop, ondragover, ondragstart and ondrag HTML5 events:

<!DOCTYPE HTML>
<html>
<head>
<style>
.drop_div {
    float:left; 
    width:100px; height:100px;
    margin:15px; padding:10px;
    border:4px double #33affa; border-radius:200px;
    text-align:center; 
    }
#drag_div {
    width:60px; height:60px;
    margin-left:7px; margin-top:25px;padding:10px;
    border:3px solid #999; border-radius:120px;
    background-color:white;
  }
#center_div {
  position:absolute;
  width:30px; height:1px;
  margin-left:137px; margin-top:100px;padding:2px;
  border:4px double #33affa;
  }
p {
  font-family:arial;font-size:1.1em;
  }
#inner_p {
    width:20px; height:20px;
    margin-left:30px; margin-top:30px;padding:2px;
    border:2px solid black; border-radius:120px;
    background-color:black;
  }
#alert {
  clear:both;
  top:40px;
  font-family:arial;font-size:1.6em;
  font-variant:small-caps;color:magenta;
  }
</style>
</head>
<body>

<p>Drag the smaller circle and drag to the bigger one:</p>

<div class="drop_div" ondrop="dropEvent(event)" ondragover="permitDropEvent(event)">
  <div ondragstart="dragStartEvent(event)" ondrag="draggingEvent(event)" draggable="true" id="drag_div">
    <p id="inner_p"></p>
  </div>
</div>
  
<div id="center_div"></div>

<div class="drop_div" ondrop="dropEvent(event)" ondragover="permitDropEvent(event)"></div>

<p id="alert"></p>

<script>
function dragStartEvent(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function draggingEvent(event) {
    document.getElementById("alert").innerHTML = "Why are you moving my eye?";
}

function permitDropEvent(event) {
    event.preventDefault();
}

function dropEvent(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    document.getElementById("alert").innerHTML = "I see better on the other one now!";
}
</script>

</body>
</html>

Example with form onreset, oninput, oninvalid and onsubmit HTML5 events:

<!DOCTYPE html>
<html>
<style>
    body {font-family:arial;}
    label {font-variant:small-caps;}
    ol {background-color:#7BA6B4;}
    li {margin-top:2px; padding:4px; background-color:lightblue; font-size:13px;}
	div {position:absolute;top:200px;right:80px; font-size:1.2em;
        }
  </style>
<body>
  
    <ol>
      <li>SUBMIT the form with no input text</li>
      <li>Start WRITING</li>
      <li>Write something and click on RESET</li>
      <li>SUBMIT the form with text in it</li></ol>

    <form action="" method="get" onreset="onResetEvent()" onsubmit="onSubmitEvent()">	
        <label>Enter text:<br /><input type="text" id="input_value" oninvalid="onInvalidEvent()" oninput="onInputEvent()" placeholder="Write something here..." required /></label><br /><br />
        <input type="submit" value="Submit"> <input type="reset">
  </form>
  <div id="action_box"></div>
<script>
	function onInvalidEvent() {
  		alert("Input field cannot be empty!");
	}
  	function onInputEvent() {
    	var input_value = document.getElementById("input_value").value;
    	document.getElementById("action_box").innerHTML = "Input value: <br />" + input_value;
	}
  	function onResetEvent() {
		alert("Form has been reset!");
  	}
	function onSubmitEvent() {
	  alert("Form is being processed...");
	  location.reload();
	}
</script>

</body>
</html>

Example with window onresize HTML5 events:

<!DOCTYPE html>
<html>
<style>
    body {font-family:arial;}
    h4 {margin-top:50px; padding:5px; background-color:lightblue;}
</style>
<body onresize="onResizeEvent()" onpageshow="onPageShowEvent()">

    <h4>Try resizing your browser's screen...</h4>

<script>
function onResizeEvent() {
   alert("The browser's screen has been resized!");
}
</script>

</body>
</html>

Example with media onplaying, onpause, onvolumechange and onended HTML5 events:

<!DOCTYPE html>
<html>
<style type="text/css">
    body {background-color:lightblue;}
    h4 {margin-top:-2px;}
    video {margin-top:-20px;}
    p {line-height:10px;margin-top:2px;font-size:19px;font-family:Calibri;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.5);}
</style>
<body>
  <h4>EVENTS: <em>playing, paused, volume changed</em> and <em>video ended</em></h4>
    <video width="320" height="240" controls onplaying="onPlayingEvent()" onpause="onPauseEvent()" onvolumechange="onVolumeChangeEvent()" onended="onEndedEvent()">
    <source src="../../../img/tutorials/html5_video_ex_1.mp4" type="video/mp4">
    </video>
    <p id="action_box"></p>

<script>
function onPlayingEvent() {
    document.getElementById("action_box").style = "background-color:none;color:#222;"
    document.getElementById("action_box").innerHTML = "The video is rolling..."
}
function onPauseEvent() {
    document.getElementById("action_box").style = "background-color:none;color:#222;"
    document.getElementById("action_box").innerHTML = "The video was paused. Press play to continue...";
}
function onVolumeChangeEvent() {
    document.getElementById("action_box").style = "background-color:none;color:#222;"
    document.getElementById("action_box").innerHTML = "Volume has changed...";
}
function onEndedEvent() {
    document.getElementById("action_box").style = "background-color:red;color:yellow;padding:0px 3px;"
    document.getElementById("action_box").innerHTML = "The video has ended. Please restart...";
}
</script>

</body>
</html>

Example with clipboard oncut, oncopy and onpaste HTML5 events:

<!DOCTYPE html>
<html>
<style>
    body {font-family:arial;}
    label {font-variant:small-caps;}
    div {
        position:absolute;
        top:100px;right:40px;
        font-variant:small-caps;font-size:1.4em;
        }
</style>
<body>
    <h4>Examples of copy, cut and paste commands:</h4>

    <label>Copy field:<br /><input type="text" oncopy="onCopyEvent()" placeholder="Write something here and COPY it" size="50" /></label><br /><br />

    <label>Cut field:<br /><input type="text" oncut="onCutEvent()" placeholder="Write something here and CUT it" size="50" /></label><br /><br />

    <label>Paste field:<br /><input type="text" onpaste="onPasteEvent()" placeholder="PASTE here text from above" size="50" /></label>

    <div id="action_box"></div>

<script>
function onCopyEvent() {
    document.getElementById("action_box").innerHTML = "You copied text!"
}
function onCutEvent() {
    document.getElementById("action_box").innerHTML = "You cut text!";
}
function onPasteEvent() {
    document.getElementById("action_box").innerHTML = "You pasted text!";
}
</script>

</body>
</html>

›› go to examples ››

Event attributes in HTML 5

Attribute characteristics and purpose:

Mouse Events

HTML5

HTML4.01 and older

Keyboard Events

HTML4.01 and older

Form Events

HTML5

HTML4.01 and older

Window Events

HTML5

HTML4.01 and older

Media Events

HTML5

Clipboard Events

HTML5

Other Events

HTML5

Examples:

Example with mouse ondrop, ondragover, ondragstart and ondrag HTML5 events:

Example with form onreset, oninput, oninvalid and onsubmit HTML5 events:

Example with window onresize HTML5 events:

Example with media onplaying, onpause, onvolumechange and onended HTML5 events:

Example with clipboard oncut, oncopy and onpaste HTML5 events:

Comments

About

Contact

Get Connected