HTML DOM Events


HTML DOM Events :


onabort :

The abort event occurs when the loading of an audio/video has been aborted, and not because of an error.

<video onabort="myFunction()"> </video>

afterprint :

The event occurs when a page has started printing, or if the print dialogue box has been closed.

<body onafterprint="myFunction()">

animationend :

The event occurs when a CSS animation has completed.

var x = document.getElementById("myDIV"); // Code for Chrome ,Safari and Opera x.addEventListener("webkitAnimationEnd", myEndFunction); // Standard syntax x.addEventListener("animationend", myEndFunction);

animationiteration :

The animationiteration event occurs when a CSS animation is repeated.

var x = document.getElementById("myDIV"); // Code for Chrome ,Safari and Opera x.addEventListener("webkitAnimationIteration", myRepeatFunction); // Standard syntax x.addEventListener("animationiteration", myRepeatFunction);

animationstart :

The animationstart event occurs when a CSS animation has started to play.

var x = document.getElementById("myDIV"); // Code for Chrome ,Safari and Opera x.addEventListener("webkitAnimationStart", myStartFunction); // Standard syntax x.addEventListener("animationStart", myStartFunction);

beforeprint :

The beforeprint event occurs when a page is about to be printed (before the print dialogue box appears).

<body onbeforeprint="myFunction()">

beforeunload :

The onbeforeunload event occurs when the document is about to be unloaded.

<body onbeforeunload="return muFunction()">

blur :

The onblur event occurs when an object loses focus. The onblur event is most often used with form validation code (e.g. when the user leaves a form field).

<input type="text" onblur="myFunction()">

canplay :

The oncanplay event occurs when the browser can start playing the specified audio/video (when it has buffered enough to begin).

<video oncanplay="myFunction()">

canplaythrough :

The oncanplaythrough event occurs when the browser estimates it can play through the specified media without having to stop for buffering.

<video oncanplaythrough="myFunction()">

change :

The onchange event occurs when the value of an element has been changed.

<select onchange="myFunction()">

click :

The onclick event occurs when the user clicks on an element.

<button onclick="myFunction()"> Click Me </button>

HTML DOM Events :


contextmenu :

The oncontextmenu event occurs when the user right-clicks on an element to open the context menu.

<div oncontextmenu="myFunction()" contextmenu="mymenu">

copy :

The oncopy event occurs when the user copies the content of an element.

<input type="text" oncopy="myFunction()" value="Try to copy this text">

cut :

The oncut event occurs when the user cuts the content of an element.

<input type="text" oncut="myFunction()" value="Try to cut this text">

dblclick :

The ondblclick event occurs when the user double clicks on an element.

<p ondblclick="myFunction()"> Double-Click Me </p>

drag :

The ondrag event occurs when an element or text selection is being dragged.

<p draggable="true" ondrag="myFunction(event)">Drag Me!</p>

dragend :

The ondragend event occurs when the user has finished dragging an element or text selection.

<p draggable="true" ondragend="myFunction(event)">Drag Me!</p>

dragenter :

The ondragenter event occurs when a draggable element or text selection enters a valid drop target.

<div ondragenter="myFunction(event)"></div>

dragleave :

The ondragleave event occurs when a draggable element or text selection leaves a valid drop target.

<div ondragleave="myFunction(event)"></div>

dragover :

The ondragover event occurs when a draggable element or text selection is being dragged over a valid drop target.

<div ondragover="myFunction(event)"></div>

dragstart :

The ondragstart event occurs when the user starts to drag an element or text selection.

<p draggable="true" ondragstart="myFunction(event)"> Drag Me!</p>

drop :

The ondrop event occurs when a draggable element or text selection is dropped on a valid drop target.

<div ondrop="myFunction(event)"></div>

durationchange :

The ondurationchange event occurs when the duration of the audio/video is changed.

<video ondurationchange="myFunction()"> </video>

ended :

The onended event occurs when the audio/video has reached the end.

<audio onended="myFunction()"> </audio>

error :

The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image).

<img src="image.gif" onerror="myFunction()" alt="html dom event ">

focus :

The onfocus event occurs when an element gets focus. The onfocus event is most often used with <input> , <select> , and <a>

<input type="text" onfocus="myFunction()">

focusin :

The onfocusin event occurs when an element is about to get focus.

<input type="text" onfocusin="myFunction()">

focusout :

The onfocusout event occurs when an element is about to lose focus.

<input type="text" onfocusout="myFunction()">

HTML DOM Events :


fullscreenchange :

The fullscreenchange event occurs when an element is viewed in fullscreen mode.

document.addEventListener("fullscreenchange",function(){ output.innerHTML = "fullscreenchange event fired!"; });

fullscreenerror :

The fullscreenerror event occurs when an element can not be viewed in fullscreen mode, even if it has been requested.

document.addEventListener("fullscreenerror",function(){ alert("Fullscreen denied") });

hashchange :

The onhashchange event occurs when there has been changes to the anchor part (begins with a ‘#’ symbol) of the current URL.

<body onhashchange="myFunction()">

input :

The oninput event occurs when an element gets user input. This event occurs when the value of an or element is changed.

<input type="text" oninput="myFunction()">

invalid :

The oninvalid event occurs when a submittable element is invalid.

<input type="text" oninvalid="alert('You must fill out the form');" required="">

keydown :

The onkeydown event occurs when the user is pressing a key (on the keyboard).

<input type="text" onkeydown="myFunction()">

keypress :

The onkeypress event occurs when the user presses a key (on the keyboard).

<input type="text" onkeypress="myFunction()">

keyup :

The onkeyup event occurs when the user releases a key (on the keyboard).

<input type="text" onkeyup="myFunction()">

load :

The onload event occurs when an object has been loaded.

<body onload="myFunction()">

loadeddata :

The onloadeddata event occurs when data for the current frame is loaded, but not enough data to play next frame of the specified audio/video.

<video onloadeddata ="myFunction()">

loadedmetadata :

The onloadedmetadata event occurs when meta data for the specified audio/video has been loaded.

<video onloadedmetadata="myFunction()">

loadstart :

The onloadstart event occurs when the browser starts looking for the specified audio/video. This is when the loading process starts.

<video onloadstart="myFunction()">

message :

The onmessage event occurs when a message is received through an event source.

var source = new EventSource("demo_sse.php"); // Append to document source.onmessage = function(event) { document.getElementById("myDIV").innerHTML += event.data + "<br>"; };

HTML DOM Events :


mousedown :

The onmousedown event occurs when a user presses a mouse button over an element.

<p onmousedown="myFunction()"> Click the text! </p>

mouseenter :

The onmouseenter event occurs when the mouse pointer is moved onto an element.

<img onmouseenter="bigImg(this)" src="smiley.gif" alt="smiley">

mouseleave :

The onmouseleave event occurs when the mouse pointer is moved out of an element.

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="smiley">

mousemove :

The onmousemove event occurs when the pointer is moving while it is over an element.

<div onmousemove="myFunction()"> Move the cursor over me</div>

mouseover :

The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.

<img onmouseover="bigImg(this)" src="smiley.gif" alt="smiley">

mouseout :

The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children.

<img onmouseout="normalImg(this)" src="smiley.gif" alt="smiley">

mouseup :

The onmouseup event occurs when a user releases a mouse button over an element.

<p onmouseup="mouseup()"> Click the text! </p>

offline :

The onoffline event occurs when the browser starts to work offline.

<body onoffline="myFunction()">

online :

The ononline event occurs when the browser starts to work online.

<body ononline="myFunction()">

open :

The onopen event occurs when a connection with an event source is opened.

var source = new EventSource("demo_sse.php"); source.onopen = function() { document.getElemetById("myH1").innerHTML = "Getting server updates";

pagehide :

The onpagehide event occurs when the user is navigating away from a webpage.

<body onpagehide="myFunction()">

pageshow :

The onpageshow event occurs when a user navigates to a webpage.

<body onpageshow="myFunction()">

paste :

The onpaste event occurs when the user pastes some content in an element.

<input type="text" onpaste="myFunction()" value="Paste something in here">

pause :

The onpause event occurs when the audio/video is paused either by the user or programmatically.

<video onpause ="myFunction()">

play :

The onplay event occurs when the audio/video has been started or is no longer paused.

<video onplay ="myFunction()">

playing :

The onplaying event occurs when the audio/video is playing after having been paused or stopped for buffering.

<video onplaying ="myFunction()">

progress :

The onprogress event occurs when the browser is downloading the specified audio/video.

<video onprogress ="myFunction()">

ratechange :

The onratechange event occurs when the playing speed of the audio/video is changed.

<video onratechange ="myFunction()">

resize :

The onresize event occurs when the browser window has been resized.

<video onresize ="myFunction()">

reset :

The onreset event occurs when a form is reset.

<form onreset="myFunction()"> Enter name: <input type="text"> <input type="reset"> </form>

scroll :

The onscroll event occurs when an element’s scrollbar is being scrolled.

<div onscroll ="myFunction()">

seeked :

The onseeked event occurs when the user is finished moving/skipping to a new position in the audio/video.

<video onseeked ="myFunction()">

seeking :

The onseeking event occurs when the user starts moving/skipping to a new position in the audio/video.

select :

The onselect event occurs after some text has been selected in an element.

<input type="text" onselect="myFunction()">

show :

The onshow event occurs when a element is shown as a context menu.

<div contextmenu="mymenu"> <menu type="context" id="mymenu" onshow="myFunction()"> <menuitem label="Refresh" onclick="window.location.reload()"></menuitem> </menu> </div>

stalled :

The onstalled event occurs when the browser is trying to get media data, but data is not available.

<video onstalled="myFunction()">

submit :

The onsubmit event occurs when a form is submitted.

<form onsubmit="myFunction()"> Enter name: <input type="text"> <input type="submit"> </form>

suspend :

The onsuspend event occurs when the browser is intentionally not getting media data.

<video onsuspend="myFunction()">

timeupdate :

The ontimeupdate event occurs when the playing position of an audio/video has changed.

<video ontimeupdate="myFunction()">

toggle :

The ontoggle event occurs when the user opens or closes the element.

<details ontoggle="myFunction()">

touchcancel :

The touchcancel event occurs when the touch event gets interrupted.

<p ontouchcancel="myFunction(event)"> Touch Me! </p>

touchend :

The touchend event occurs when the user removes the finger from an element.

<p ontouchend="myFunction(event)"> Touch Me! </p>

touchmove :

The touchmove event occurs when the user moves the finger across the screen.

<p ontouchmove="myFunction(event)"> Touch Me! </p>

touchstart :

The touchstart event occurs when the user touches an element.

<p ontouchstart="myFunction(event)"> Touch Me! </p>

transitionend :

The transitionend event occurs when a CSS transition has completed.

// Code for Safari 3.1 to 6.0 document.getElementById("myDIV").addEventListener("webkitTransitionEnd",myFunction); // Standard syntax document.getElementById("myDIV").addEventListener("transitioned",myFunction);

unload :

The onunload event occurs once a page has unloaded (or the browser window has been closed).

<body onunload="myFunction()">

volumechange :

The onvolumechange event occurs each time the volume of a video/audio has been changed.

<video onvolumechange="myFunction()">

waiting :

The onwaiting event occurs when the video stops because it needs to buffer the next frame.

<video onwaiting="myFunction()">

wheel :

The onwheel event occurs when the mouse wheel is rolled up or down over an element.

document.getElementById("myDIV").addEventListener("wheel",myFunction); function myFunction() { this.style.fontSize = "35px" ;

I hope you like this HTML DOM Events article.

Also Read :