JavaScript Events
Contents
onclick
The onclick event fires when an element is clicked.
<span onclick="alert('You just made onclick happen.')">Click me!</span>
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>
ondblclick
The ‘ondblclick` element fires when the element is double-clicked.
<span ondblclick="alert('You just made ondblclick happen.')">Double click me!</span>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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;
}
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.
