Javascript is event driven. By that we mean that it reacts to events. Sometimes the event can be as simple as the loading of the page, but it can also be the user clicking on some element of the page or a key press or many other types of interaction.

Events can be added to HTML elements (DOM elements) of the document in a number of different ways.

Inline Events

This is an old school technique but you may well come across it in older code samples. Here the Javascript event is added directly to the HTML element as an attribute of that tag ie:

<p onclick="alert('ouch')">Click on me</p>

Click on me to see this in action

In the above example the Javascript, in the shape of a simple alert() is also embedded in the HTML. We could have this make a function call instead ie:

<p onClick="sayCheese()">Click on me</p>

… and then in the <script> in the document have a function ie:

<script>
function sayCheese(){
    alert('Loving all this cheese');
}
</script>

Here is a simple demo.

Tip: There are lots of event types, some of the most popular are onClick, onMouseover, onMouseup, onSubmit and onLoad.

DOM Events

The above works fine but a better way is to assign events to DOM elements via Javascript, rather than mixing them up with the HTML. Here we target a DOM element we wish to have an event attached to. For example, if we have some HTML as follows:

<p id="chgCheese">Change</p>

We could then write Javascript in a <script> tag as to add an event to that element ie:

<script>
document.getElementById('chgCheese').onClick = function(){
	document.getElementById('cheese').innerHTML = "Lancashire Crumbly";
}
</script>

Take a look at this demo which was originally created for our discussion on getElementById.

The addEventListener Method

The newish kid on the block when it comes to events is addEventListener. This has a neater syntax than the techniques outlined above and is also one that may be familiar to uses of ActionScript. Now the bad news, addEventListener is not supported in Internet Explorer 8 and earlier. Ho and indeed hum.

target.addEventListener(eventType,eventListener);

The eventType can be the likes of ‘click’, ‘mouseover’, ‘mouseout’ and the eventListener is a function either anonymous or named that is called when the event is triggered.

Keeping it cheesy with the demo – our example using addEventListener would appear as follows:

<script>
document.getElementById('chgCheese').addEventListener('click', function(){
	document.getElementById('cheese').innerHTML = "Lancashire Crumbly";
});
</script>

View the demo.

What is particularly useful about addEventListener is the ability to retrieve information from the ‘event object’. Can be a little abstract this but the event is itself an object and as such it has properties we can interrogate. To see the event object I’ve amended the above example slightly:

<script>
document.getElementById('myID').addEventListener('click', function(ev){
	document.getElementById('msg').innerHTML = 'Event Object: '+ev+"<br>";
	document.getElementById('msg').innerHTML += 'Event Target: '+ev.target.id+"<br>";
	console.dir(ev);
});
</script>

The key concept here is the parameter that I have called ‘ev’ (just conveniently short for event) that is passed to the function handling the event. This is our ‘event object’ and can be retrieved and interrogated by the event handling function. So above we use ev.target.id to find out the ID of the DOM element that triggered the event.

View the demo.

Tip: I have also added console.dir(ev) in the above example so that you can see the big list of properties that are associated with the event.

Where to put the Code

You’ll notice in the demo above the code is placed at the bottom of the HTML before the closing </body> tag. This is quite deliberate. Take a look at this really rubbish demo. When you click the text ‘change’ the cheese is not updated. This is because this example does not ‘Respect the DOM’.

The only difference between the working demo and the not-working demo is the position of the Javascript in the HTML code.

In the non-working example the Javascript is in the <head> of the HTML file. This is fine but the Javascript asks the document to getElementById – in particular the element of ID ‘chgCheese’. Now as this bit of HTML has not been seen by the browser yet, as it is later in the document, then the Javascript is not able to find it and the event is not bound to the element.

This is a really common mistake. Remember to ‘Respect the DOM’. That is don’t reference an element until the DOM knows about it. In reality this means waiting until the document has loaded.

Introducing onLoad() .. init

Many, many Javascript developers place their <script> tag and code in the <head> of the document. When doing this all the developer needs to do is wait until the document has loaded then launch their Javascript as the DOM is at that point understood by the browser. This commonly done by adding an onload event to the <body> tag. All the visible bits of the DOM are in the <body> so it makes the perfect choice for this event. Now this can be done inline ie:

<body onLoad="init()">

This will call a function I have chosen to call init(). This a common naming convention for programmers init() been short for ‘initialize’ (and not ‘Isn’t it’ as is UK youth-speak parlance). So the fuller example would be:

<head>
<script>
function init(){
  alert('DOM Loaded and Ready for Action');
}
</script>
</head>
<body onLoad="init()">

Here is a revised demo using this technique.

If you prefer not to place the onload event inline then another option is to use window.onload to trigger your Javascript, again once the DOM is understood. An example would be:

<head>
<script>
window.onLoad = function(){
  alert('DOM Loaded and Ready for Action');
}
</script>
</head>
<body>

Here is a revised demo using this technique.

Note: The window object in Javascript is the ‘parent’ of the document object.

Note: This technique uses something called an anonymous function. An anonymous function does not have a name and is assigned directly to the event.

Leave a Comment