JavaScript: Events

Events are the core of almost all JavaScript scripts. Events are simply things that happen, and without events, scripts really cease to be very useful. In nearly all JS scripts, at least part of the script is triggered by a certain event - this is because JavaScript is all about adding interactivity to a page - when the user does something, the page has to trigger a routine to react. This is quite literally what an event is: whenever the user does something, an event takes place.

JavaScript has the ability to detect a number of different events in the form of things called event handlers. Event handlers essentially just wait until a certain event happens, and then do something to handle the event triggering. When your script responds to an event: bam! Interactivity!

There are different events in different specifications, but the "proper" specification that is most widely followed is the W3C Level 3 Specification - for information on (all) JavaScript events along with browser compatibility for said events, I suggest the good resource over at QuirksMode.

One of the most common (and supported) JavaScript event is probably the onclick event. This triggers when a user clicks on an element (or more accurately "when a mousedown and mouseup event occur on the same element OR an element is activated by the keyboard." - see the QuirksMode resource linked earlier). If we were to create an event handler using this on an element in a piece of JavaScript however, we would first require our document to be fully loaded, otherwise our JavaScript wouldn't be able to target the element to put the event handler on. As such, we usually need to set up some kind of onload event which then nests any further events that we require (the onload event triggers "when an asset is loaded").

So the first thing that we should do is set this up. There are a number of ways that event handling can be accomplished in JavaScript. The first (and messiest) way to handle events in JavaScript is to use the corresponding attributes in the HTML, for example the onclick event can be used via the onclick attribute:

1
2
3

<div onclick="javascript:alert('Hi');">
Hello -- try clicking me!
</div>

We've sort of touched on this technique of using javascript: in attribute values before, but I feel as if I should confirm that this is a viable (although messy) way of handling events. This method isn't so useful, however, when you want to keep your markup clean, or more importantly, if you want to do event handling on elements which aren't present in your markup - for example the window element which we want to use the onload event on so that we know that everything is loaded correctly before attempting to target any elements via JavaScript.

For most cases it's much better to handle events using "real" sections of JavaScript. You can use the appropriate method on any element variable in JavaScript, and from there you can set this to a function which you want to handle the event. This function will then be called whenever the event is triggered.

In the case of our window load example, we can set window.onload equal to a function which holds the majority of our event code. So you'd probably want something like the following:

1
2
3
4
5
6

function doThings()
{
	alert("Hi");
}

window.onload = doThings;

Although the above is pretty pointless at the moment since an alert doesn't really make use of our current system, we'll be able to make use of this soon. It's worth noting that whenever you make a function for event handling, you can also make it take a parameter and whenever an event calls the function it will pass the event itself to the variable -- this parameter is usually called "e" for event.

You don't actually have to create a "real" function to handle events this way either, you can create what is called an anonymous function or function literal, this is a function which is just used for this one-off purpose and so doesn't need a name, like so:

1
2
3

window.onload = (function(){
	alert("Hi");
});

Since the window.onload event handler function doesn't usually require further calling, it's usually simpler and more compact to use the above method. From here, we could use the same technique to utilise any of the other events - however unlike "window", not all elements are easily available in variables for access.

To combat this, you can target elements with a particular ID in JavaScript by using the document.GetElementByID method, and passing it the ID of the element. This method must be used after everything has loaded properly, otherwise no element will be found as the Document Object Model has not fully formed - this is why our window.onload routine is so important. The DOM can essentially be thought of as a big tree diagram which is created from your markup containing the different elements and showing how they are nested and related -- if this element data isn't ready, some components of the page cannot be properly utilised.


So using all this information, we could expand upon our code to create a basic box which does something onclick:

HTML: 
1
2
3

<div id="greeting">
Hello
</div>
JS: 
1
2
3
4
5
6
7
8

function tickle() {
	alert("Stop! That tickles!");
}

window.onload = function(){
	var element = document.getElementById('greeting');
	element.onclick = tickle;
}

This script functions exactly as expected (in the majority of browsers), as can be seen in the JSFiddle below:

Inside these routines you can then utilise some of the fancy structures we've learnt about like loops, other functions, and if-statements, and you can also wire up several events to the same element if you want to create some more complex interactivity. If you're feeling like a bit of a challenge, try adapting our script to also handle the ondblclick event which triggers on a double click.

Just as a note to end this tutorial, as your JavaScript gets more complex and handles more events and other things - it may (or may not depending on your circumstances) be worth looking into a library like jQuery. At least for now, these libraries make things much easier and handle issues like browser support and bugs while making event handling and fancy effects very easy.