View video tutorial
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.