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>
Try it Now »

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 element.
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>
Try it Now »

Click on the "See output" button to see how it works.