HTML Events
HTML
HTML events trigger an action and acts as an interface between browsers and user.
HTML Event Atrributes
Events triggers actions. User performs actions using events.
Each event has corresponding Event Handler and is responsible to call functions.
When event fires Event Handler invoke user defined functions or builtin functions.
Events can be categorized as Windows Event, Form Event, Keyboard Event, Mouse Event, Clipboard Event, Media Event.
The click
Event
<button type="button" onclick="handlerFunction()">Click Here!</button>
Example
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<h1>Event Example</h1>
<button type="button" onclick="handlerFunction()">Click Here!</button>
<script>
function handlerFunction() {
alert("Hello from JavaScript!");
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.
Windows Events Global Attributes
This section describes attributes that are for the window object (body element)
Event | Event Handler | Description |
---|---|---|
afterprint | onafterprint | Fires after the document is printed |
beforeprint | onbeforeprint | Fires before the document is printed |
beforeunload | onbeforeunload | Fires when the document is about to be unloaded. |
error | onerror | Fires when an error occurs. |
hashchange | onhashchange | Fires when there has been changes to the anchor part of the a URL. |
load | onload | Fires after the page is finished loading. |
message | onmessage | Fires when the message is triggered. |
offline | onoffline | Fires when the browser starts to work offline. |
online | ononline | Fires when the browser starts to work online. |
pagehide | onpagehide | Fires when a user navigates away from a page. |
pageshow | onpageshow | Fires when a user navigates to a page. |
popstate | onpopstate | Fires when the window's history changes. |
resize | onresize | Fires when the browser window is resized. |
storage | onstorage | Fires when a Web Storage area is updated. |
unload | onunload | Fires once a page has unloaded or the window has been closed. |
Form Events Global Attributes
This section describes attributes that are common to all HTML elements(mostly form element)
Event | Event Handler | Description |
---|---|---|
blur | onblur | Fires when element loses focus. |
change | onchange | Fires when the value of the element is changed. |
contextmenu | oncontextmenu | Fires when a context menu is triggered. |
focus | onfocus | Fires when the element gets focus. |
input | oninput | Fires when an element gets user input. |
invalid | oninvalid | Fires when an element is invalid. |
reset | onreset | Fires when the forms Reset button is clicked. |
search | onsearch | Fire when the user writes something in the search field. |
select | onselect | Fires when any text has been selected in an element. |
submit | onsubmit | Fires when a form is submitted. |
Keyboard Events Global Attributes
This section describes attributes that are common to all input elements(mostly text input)
Event | Event Handler | Description |
---|---|---|
keydown | onkeydown | Fires when a user presses a key and hold. |
keypress | onkeypress | Fires when a user presses a key. |
keyup | onkeyup | Fires when a user releases a key. |
Mouse Events Global Attributes
This section describes attributes that are common to all HTML elements.
Event | Event Handler | Description |
---|---|---|
click | onclick | Fires when a mouse click on the element. |
dblclick | ondblclick | Fires when a mouse double-click on the element. |
mousedown | onmousedown | Fires when a mouse button is pressed down on an element. |
mousemove | onmousemove | Fires when the mouse pointer is moving over an element. |
mouseout | onmouseout | Fires when the mouse pointer moves out of an element. |
mouseover | onmouseover | Fires when the mouse pointer moves over an element. |
mouseup | onmouseup | Fires when a mouse button is released over an element. |
wheel | onwheel | Fire when the mouse wheel rolls up or down over an element. |
Clipboard Events Global Attributes
This attributes are for the text elements.
Event | Event Handler | Description |
---|---|---|
copy | oncopy | Fires when the user copies the content of an element. |
cut | oncut | Fires when the user cuts the content of an element. |
paste | onpaste | Fires when the user pastes some content in an element. |
Media Events Global Attributes
This section describes attributes that are for mostly media objects.
Event | Event Handler | Description |
---|---|---|
abort | onabort | Fires when abort. |
canplay | oncanplay | Fires when a file is ready to start playing. |
canplaythrough | oncanplaythrough | Fires when a file can be played all the way to the end without pausing for buffering. |
cuechange | oncuechange | Fires when the cue changes in a |
durationchange | ondurationchange | Fires when the length of the media changes. |
emptied | onemptied | Fires when something happens bad and the file is suddenly unavailable. |
ended | onended | Fire when the media has reached its last stage. |
error | onerror | Fires when an error occurs. |
loadeddata | onloadeddata | Fires when media data is loaded. |
loadedmetadata | onloadedmetadata | Fires when meta data are loaded. |
loadstart | onloadstart | Fires just as the file begins to load before anything is actually loaded. |
pause | onpause | Fires when the media is paused. |
play | onplay | Fires when the media is ready to play. |
playing | onplaying | Fires when the media is playing. |
progress | onprogress | Fires when the browser is in the process of getting the media data. |
ratechange | onratechange | Fires each time the playback rate changes. |
seeked | onseeked | Fires when the seeking attribute is set to false. |
seeking | onseeking | Fires when the seeking attribute is set to true. |
stalled | onstalled | Fires when the browser is unable to fetch the media data. |
suspend | onsuspend | Fires when fetching the media data is stopped. |
timeupdate | ontimeupdate | Fires when the playing position has changed. |
volumechange | onvolumechange | Fires each time the volume is changed. |
waiting | onwaiting | Fires when the media has paused. |
Drag & Drop Events
During drag operations, several event types are fired. Each drag event type has an associated event handler:
Event | Event Handler | Description (Fires) |
---|---|---|
drag | ondrag | When a dragged item (element or text selection) is dragged. |
dragend | ondragend | When a drag operation ends (such as releasing a mouse button). |
dragenter | ondragenter | When a dragged item enters a valid drop target. |
dragleave | ondragleave | When a dragged item leaves a valid drop target. |
dragover | ondragover | When a dragged item is being dragged over a valid drop target, every few hundred milliseconds. |
dragstart | ondragstart | When the user starts dragging an item. |
drop | ondrop | When an item is dropped on a valid drop target. |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
The keyup
Event
<input id="text1" type="text" onkeyup="handlerFunction()" placeholder="Type something here"/>
Example
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<h1>Event Example</h1>
<h2 id="p1"></h2>
<input id="text1" type="text" onkeyup="handlerFunction()" placeholder="Type something here"/>
<script>
function handlerFunction() {
var t1 = document.getElementById("text1").value;
document.getElementById("p1").innerHTML=t1;
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.