JavaScript Events

onclick

The onclick event fires when an element is clicked.

<span onclick="alert('You just made onclick happen.')">Click me!</span>
Click me!

oncontextmenu

The oncontextmenu event fires the context menu (“right-click” or “two-finger tap”) is opened (or when the user tries to open it — this can be used to disable the context menu).

<span oncontextmenu="alert('You just made oncontextmenu happen.')">Right-click or two-finger tap me (or whoever you usually open a context menu on your device)!</span>
Right-click or two-finger tap me (or whoever you usually open a context menu on your device)!

ondblclick

The ‘ondblclick` element fires when the element is double-clicked.

<span ondblclick="alert('You just made ondblclick happen.')">Double click me!</span>
Double click me!

onerror

The onerror event fires when an element fails to load.

In the code below the onerror event won’t be triggered until you click on the broken image link. We’ve it up this way to avoid surprising you with unexpected JavaScript alerts. Click on the broken image link below to trigger the onerror event.

<img src="/bad/path/to/file.jpg" onclick="this.onerror=alert('Clicking on the broken image link triggered the onerror event which produced this JavaScript alert dialog box.')">

onload

The onload event fires when an element completes loading. It is most often placed on the <body> (or in a function referencing the <body>), and used to trigger other actions which cannot be done until the page is loaded.

<!-- Placing the onload event trigger as an attribute of the body. -->
<body onload="add actions to take place after body has loaded">

<!-- Onload could also be added to the body of an html document like this. -->
<script>
document.getElementsByTagName('body').onload = actions to take place after body has loaded ;
</script>

<!-- We'll demo onload by changing the id of a div with the click of a button -->
<script>
function triggerOnload() {
  document.getElementById('noAlert').id = "onloadAlert";
  document.getElementById('onloadAlert').onload = alert("By clicking the button you loaded a div and triggered the onload event.");
  document.getElementById('onloadAlert').id = "noAlert";
}
</script>
<button onclick="triggerOnload()">Trigger onload</button>
<div id="noAlert"></div>
function triggerOnload(){document.getElementById(‘noAlert’).id=”onloadAlert”; document.getElementById(‘onloadAlert’).onload=alert(“By clicking the button you loaded a div and triggered the onload event.”); document.getElementById(‘onloadAlert’).id=”noAlert”;}

onmousedown

The onmousedown event fires when the user presses the mouse button down while inside (or over) the element. (Mouse button is pressed and held.)

<span onmousedown="alert('You just made onmousedown happen.')">Press down on your mouse while over me!</span>
Press down on your mouse while over me!

Note that onclick and onmousedown have subtly different behavior, and can also interfere with each other.


<span onmousedown="alert('You just made onmousedown happen.')">Press down on your mouse while over me!</span> <span onclick="alert('You just made onclick happen.')">Click me!</span> <span onclick="alert('You just made onclick happen.')" onmousedown="alert('You just made onmousedown happen.')">This has both event triggers on it. See what happens.</span>

Press down on your mouse while over me!

Click me!

This has both event triggers on it. See what happens.

onmouseenter

The onmouseenter event is fired when the cursor enters an element.

<div class="demobox" onmouseenter="alert('You just made onmouseenter happen.')">
Mouse over this box and see what happens.
</div>
Mouse over this box and see what happens.

onmouseleave

The onmouseleave event is fired when the cursor leaves an element.

<div class="demobox" onmouseleave="alert('You just made onmouseleave happen.')">
Mouse into and out of this box and see what happens.
</div>
Mouse into and out of this box and see what happens.

onmousemove

The onmousemove event is fired when the cursor moves while inside an element.

<div class="demobox" onmousemove="alert('You just made onmousemove happen.')">
Mouse around inside of this box and see what happens.
</div>
Mouse around inside of this box and see what happens.

onmouseout

The onmouseout event fires when the mouse enters the element, or a child element. It will fire when entering a child element as well, as this is interpreted as having left the parent element. Notice that this is slightly different than onmouseleave, which does not fire on child elements.


<div class="demobox" onmouseout="alert('You just made onmouseout happen.')"> Mouse into and then out of this box and see what happens. <div class="demobox"> And then do that here, and it happens again. </div> </div> <div class="demobox" onmouseleave="alert('You just made onmouseleave happen.')"> Mouse into and then out of this box and see what happens. <div class="demobox"> And then enter this, but nothing happens. </div> </div>
Mouse into and then out of this box and see what happens.

And then do that here, and it happens again.
Mouse into and then out of this box and see what happens.

And then enter this, but nothing happens.

onmouseover

The onmouseover event fires when the mouse enters the element, or a child element. Notice that this is slightly different than onmouseenter, which does not fire on child elements.


<div class="demobox" onmouseover="alert('You just made onmouseover happen.')"> Mouse into this box and see what happens. <div class="demobox"> And then enter this, and it happens again. </div> </div> <div class="demobox" onmouseenter="alert('You just made onmouseenter happen.')"> Mouse into this box and see what happens. <div class="demobox"> And then enter this, but nothing happens. </div> </div>
Mouse into this box and see what happens.

And then enter this, and it happens again.
Mouse into this box and see what happens.

And then enter this, but nothing happens.

onmouseup

The onmouseup event fires when the user releases the mouse button while inside (or over) the element.

<span onmouseup="alert('You just made onmouseup happen.')">Press down on your mouse anywhere on the screen, but release it while over me!</span>
Press down on your mouse anywhere on the screen, but release it while over me!

Note that onclick and onmouseup have subtly different behavior, and can also interfere with each other.

<span onmouseup="alert('You just made onmouseup happen.')">Press down and release your mouse button anywhere on while over me!</span>

<span onclick="alert('You just made onclick happen.')">Click me!</span>

<span onclick="alert('You just made onclick happen.')" onmouseup="alert('You just made onmouseup happen.')">This has both event triggers on it. See what happens.</span>
Press down and release your mouse button anywhere on while over me!

Click me!

This has both event triggers on it. See what happens.

onscroll

The onscroll event is fired when an element is scrolled.

.scrollbox {
 height: 6em;
 overflow: scroll;
}
<div class="demobox scrollbox" onscroll="alert('You have made the onscroll event happen!')">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tincidunt felis, vel dictum dui. Vestibulum mattis, ante non elementum sodales, mi lorem lobortis arcu, non aliquet libero mauris id erat. Praesent egestas varius scelerisque. Curabitur facilisis ipsum nunc, quis feugiat dolor sagittis ac. Morbi luctus blandit sem, ac finibus augue. Nam ultricies, odio non consectetur interdum, libero quam scelerisque tellus, a hendrerit ipsum felis sit amet lorem. Donec egestas facilisis rhoncus. Praesent tempus quis eros at hendrerit. Praesent iaculis non diam porttitor rutrum.

Nunc diam sem, pulvinar at blandit eu, mollis nec augue. Cras convallis sit amet metus gravida consequat. Nulla iaculis enim ac nulla convallis, vestibulum accumsan velit tincidunt. Cras varius mauris vel ligula auctor convallis. Nulla aliquet elementum metus, non luctus ligula interdum et. Etiam nunc lorem, tincidunt nec neque vitae, pulvinar pulvinar tortor. Morbi mollis dapibus blandit.
</div>

.scrollbox {
height: 6em;
overflow: scroll;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tincidunt felis, vel dictum dui. Vestibulum mattis, ante non elementum sodales, mi lorem lobortis arcu, non aliquet libero mauris id erat. Praesent egestas varius scelerisque. Curabitur facilisis ipsum nunc, quis feugiat dolor sagittis ac. Morbi luctus blandit sem, ac finibus augue. Nam ultricies, odio non consectetur interdum, libero quam scelerisque tellus, a hendrerit ipsum felis sit amet lorem. Donec egestas facilisis rhoncus. Praesent tempus quis eros at hendrerit. Praesent iaculis non diam porttitor rutrum.

Nunc diam sem, pulvinar at blandit eu, mollis nec augue. Cras convallis sit amet metus gravida consequat. Nulla iaculis enim ac nulla convallis, vestibulum accumsan velit tincidunt. Cras varius mauris vel ligula auctor convallis. Nulla aliquet elementum metus, non luctus ligula interdum et. Etiam nunc lorem, tincidunt nec neque vitae, pulvinar pulvinar tortor. Morbi mollis dapibus blandit.