Events in JavaScript

JS Use the GlobalEventHandlers Web API

While Global Event Handlers are actually a Web API, accessing these events are central to Javascript's usefulness. These events mark points of interaction from the user or programmatic changes to the document. All of this can be harnessed via JavaScript to provide both functional and visual manipulations that create a modern and immersive web experience. For detail on the whole Web API see GlobalWebHandlers Web API.


The load event triggers when the an item has finished loading. This could be an <img>, window, XMLHttpRequest and more.

window.onload = function() {
    const elm = document.getElementById('onload-sample');
    elm.style.width = "100%";
    elm.style.background = url("https://source.unsplash.com/random/")

<div id="onload-sample" style="width:10px; background-image: linear-gradient(to right,#FDCA40, #2176FF ); transition: all 60s ease; overflow: hidden">Slow ONLOAD sample</div>


onmouseover & onmouseout

<marquee onmouseover="stop()" onmouseout="start()">This is MARQUEE text in HTML</marquee>

As the marquee text moves, hover over it to see it stop, then move away to see it start up again. Each time either a mouseover or mouseout events is triggered.

This is MARQUEE text in HTML
function sampleMsOverHandler(elm) {
    elm.style.backgroundColor = "green";

function sampleMsOutHandler(elm) {
    elm.style.backgroundColor = "blue";

<div onmouseover="sampleMsOverHandler(this)" onmouseout="sampleMsOutHandler(this)" style="color: white; background-color: darkblue; text-align: center; padding:1em;" >Mouseover and Mouse Out Functions Sample</div>
Mouseover and Mouse Out Functions Sample

onfoucus & onblur

The focus and blur events are produced when an element is selected or deselected, respectively

function sampleOnfocusHandler(elm) {
    elm.style.backgroundImage = "url(https://source.unsplash.com/random/800x100)";

function sampleOnblurHandler(elm) {
    elm.style.backgroundImage = "linear-gradient(to right bottom, green, orangered)";

<button onfocus="sampleOnfocusHandler(this)" onblur="sampleOnblurHandler(this)" style="color: white; background-color: #2271b1; text-align: center; padding:1em;" >ONFOCUS and ONBLUR Sample</button>

↑Click in and outside of this box↑

onkeydown & onkeyup

When a key is pressed, the process of pushing it down and then releasing it back up generates two events that can be harnessed. The trip down triggers the keydown event, the trip back up triggers a keyup event. Note: The keypress event, has been deprecated, but it was around for a while so it still may be encountered. This was triggered when the key was pressed down

function sampleOnKeyDownHandler(elm) {
    elm.style.color = "green";
    elm.style.letterSpacing = "0.5em";

function sampleOnKeyUpHandler(elm) {
    elm.style.color = "blue";
    elm.style.letterSpacing = "0";

<input type='text' onkeydown="sampleOnKeyDownHandler(this)" onkeyup="sampleOnKeyUpHandler(this)" style=" color: #7D869C; background-image: linear-gradient(to right bottom, yellow, green); text-align: center; padding:1em;" >ONKEYDOWN and ONKEYUP sample</input>
←Type here ONKEYDOWN and ONKEYUP sample


function onSubmitSample() {
 alert('You are now submitting this form!');

<form onsubmit="onSubmitSample()" >
<input type="submit" />

There Are Many More!

There are many more events that can be harnessed for a great deal of control over much of the web app processing. The detail above is just to outline the basic concept and provide a few good examples. Essentially, when an event is produced by the GlobalEventHandlers Web API, we can use JavaScript to grab the related detail and launch functions toward a variety of end goals.

I did not cover onclick because it is so commonly used it seemed a waste of space to get into this here. There are many great click events we can grab, along with CSS transitions and animations, drag and drop events and so many more.

Check them all out here →

2 Replies to “Events in JavaScript”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

↑ Back to Top