JavaScript and Events

It always surprises me how many people asking questions about event processing in JavaScript refer to the events as 'onClick', 'onChange' etc. JavaScript has always been case sensitive and the references to events have always been entirely lowercase. Specifying them with an uppercase character makes it clear that the person is thinking of the calls as HTML and not as JavaScript since HTML is not case sensitive and so does allow you to include them like that whereas no such references exist in JavaScript. In any case there has not been any reason for jumbling your JavaScript in with the HTML for many years and so there shouldn't be any such references in your HTML even if you do write them entirely in lowercase.

Even 'onclick' and 'onchange' are not really the correct way of referring to the events when talking about JavaScript as even when written entirely within your JavaScript these references imply that you are using old style event handlers where only one of each can be attached to a single element in the HTML and therefore your JavaScript code is still more obtrusive than it needs to be. The only time where you can safely use such references in JavaScript without running the risk of script clashes is where you use them to attach an event handler to an HTML element added from the same script and where other scripts added to the page would not expect that element to exist.

The correct way of referring to these events in JavaScript (and even in the now dead JScript) is 'click' and 'change'. When used correctly in event listeners there is no 'on' associated with the event at all (unless you are using a library such as JQuery which uses on() as its wrapper around event listeners). The advantages that listeners have over handlers is that you can attach more than one listener of the same type to the same element where attaching a second handler would automatically overwrite the first. Also with listeners you can not only add them, you can remove them as well. So for example if you only want processing to occur the first time something is clicked then the function that your 'click' listener runs would also remove that listener from the element so that subsequent clicks would not run it again.

There are many things that event listeners can do that event handlers can't. With event listeners you can determine the order in which listeners attached to different elements all triggered by the same event will run by setting the third parameter of the call to either true or false. This will determine whether the listener will be processed in the first phase that starts at the body and works in or in the second phase that starts at the point where the event was triggered and works back out to the body. You don't get this choice if you use event handlers. With event listeners only the order in which listeners attached to the same element and listening for the same event is undefined - but since the only time that is going to happen will be with completely separate scripts it will not matter which runs first and which second (unlike with handlers where only the second one added will run at all).

With the death of Internet Explorer 8 all browsers now support JavaScript and so even the attachEvent alternative that JScript used is no longer required. All events can be processed using listeners without any issues caused by popular but antiquated browsers as all popular browsers now support relatively modern JavaScript.

The only aspect of event processing in JavaScript that now differs between browsers is with some of the most recently added JavaScript APIs that extend the JavaScript standard. As there are still some modern browsers that do not provide full support for these APIs, any events associated with the unsupported APIs will not be recognised. If anything this is a good thing as it means that the browser that doesn't understand the API will not be trying to run code it doesn't understand.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow