1. Technology

Moving JavaScript out of the Web Page

Moving Event Handlers


One of the most useful ways that JavaScript can be used to add functionality to a web page is to perform some sort of processing in response to an action by your visitor. The most common action that you want to respond to will be when that visitor clicks on something. The event handler that allows you to respond to visitors clicking on something is called onclick.

When most people first think about adding an onclick event handler to their web page they immediately think of adding it to an <a> tag. This gives a piece of code that often looks like:

<a href="#" onclick="dosomething(); return false;">

This is the wrong way to use onclick unless you have an actual meaningful address in the href attribute so that those without JavaScript will be transferred somewhere when they click on the link. A lot of people also leave out the "return false" from this code and then wonder why the top of the current page always gets loaded after the script has run (which is what the href="#" is telling the page to do unless false is returned from all the event handlers. Of course if you have something meaningful as the destination of the link then you may want to go there after running the onclick code and then you will not need the "return false".

What many people do not realise is that the onclick event handler can be added to any HTML tag in the web page in order to interact when your visitor clicks on that content. So if you want something to run when people click on an image you can use:

<img src="myimg.gif" onclick="dosomething()">

If you want to run something when people click on some text you can use:

<span onclick="dosomething()">some text</span>

Of course these don't give the automatic visual clue that there will be a response if your visitor clicks on them the way that a link does but you can add that visual clue easily enough yourself by styling the image or span appropriately.

The other thing to note about these ways of attaching the onclick event handler is that they do not require the "return false" because there is no default action that will happen when the element is clicked on that needs to be disabled.

These ways of attaching the onclick are a big improvement on the poor method that many people use but it is still a long way from being the best way of coding it. One problem with adding onclick using any of the above methods is that it is still mixing your JavaScript in with your HTML. onclick is not an HTML attribute, it is a JavaScript event handler. As such to separate our JavaScript from our HTML to make the page easier to maintain we need to get that onclick reference out of the HTML file into a separate JavaScript file where it belongs.

The easiest way to do this is to replace the onclick in the HTML with an id that will make it easy to attach the event handler to the appropriate spot in the HTML. So our HTML might now contain one of these statements:

< img src="myimg.gif" id="img1">
<span id="sp1">some text</span>

We can then code the JavaScript in a separate JavaScript file that is either linked into the bottom of the body of the page or which is in the head of the page and where our code is inside a function that is itself called after the page finishes loading. Our JavaScript to attach the event handlers now looks like this:

document.getElementById('img1').onclick = dosomething;
document.getElementById('sp1').onclick = dosomething;

One thing to note. You will notice that I have always written onclick entirely in lowercase. When coding the statement in their HTML you will see some people write it as onClick. This is wrong as the JavaScript event handlers names are all lowercase and there is no such handler as onClick. You can get away with it when you include the JavaScript inside your HTML tag directly since HTML is not case sensitive and the browser will map it across to the correct name for you. You can't get away with wrong capitalisation in your JavaScript itself since the JavaScript is case sensitive and there is no such thing in JavaScript as onClick.

This code is a huge improvement over the prior versions because we are now both attaching the event to the correct element within our HTML and we have the JavaScript completely separate from the HTML. We can improve on this even further though.

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Improving Your JavaScript
  6. Moving JavaScript out of the Web Page - Moving Event Handlers

©2014 About.com. All rights reserved.