Introduction

A lot has changed with regard to events and event handling since the old days of HTML. Let’s have a brief look at it.

Old Days

In the old days, it was common to add event listeners in one of two ways:

By code:

   1: var elm = document.getElementById('id');

   2: elm.onclick = function()

   3: {

   4:     //do something

   5: };

Or in the HTML declaration of an element:

   1: <a id="id" href="#" onclick="/*do something*/">Click me</a>

The problem with the first approach was that different browsers would pass the event argument (Event class) in different ways:

• Internet Explorer had a global window.event instance;
• Other browsers would pass the event instance as an argument to the handler function.

One way to go around this would be something like:

   1: elm.onclick = function(evt)

   2: {

   3:     if (!evt)

   4:     {

   5:         //IE

   6:         evt = window.event;

   7:     }

   8:     //do something with evt

   9: };

But for the second one, only IE supported accessing the event instance, through the global window.event property. For other browsers, this was lost.

Either way, you could only add a single event listener for each event, which was a big limitation. IE did offer a proprietary solution to this, through the attachEvent method:

   1: var elm = document.getElementById('id');

   2: elm.attachEvent('click', function()

   3: {

   4:     //do something

   5: });

Likewise, the way to get the event was through window.event.

As for canceling the default behavior of the event (such as preventing browser navigation or form submittal), returning false usually worked, but it would mean that you had to declare the event handler appropriately, while using the inline HTML syntax:

   1: <a id="id" href="#" onclick="/*do something*/return false">Click me</a>

In IE, setting window.event.returnValue to false would do the same.

Most browsers would use the dispatchEvent method for raising an event:

   1: var elm = document.getElementById('id');

   2: var evt = document.createEvent('MouseEvent');

   3: evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, 0, null);

   4: evt.dispatchEvent(evt);

But IE would instead use the fireEvent and the createEvent methods:

   1: var elm = document.getElementById('id');

   2: var evt = document.createEvent('MouseEvent');

   3: evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, 0, null);

   4: evt.fireEvent(evt);

Present

Currently, the ECMAScript specification says that the way to add event listeners to a DOM element should be done through the addEventListener method, as in:

   1: var elm = document.getElementById('id');

   2: elm.addEventListener('click', function(evt)

   3: {

   4:     //do something with evt

   5: });

The event handler function always receives an event argument, which will be an instance of the Event class. The old JavaScript approach works as well:

   1: var elm = document.getElementById('id');

   2: elm.onclick = function(evt)

   3: {

   4:     //do something with evt

   5: };

The difference between these two approaches is that the first allows having multiple event handlers for the same event, whereas the latter does not. As you can imagine, it is safer to go the addEventListener way, which, BTW, is what jQuery and other libraries use.

In HTML inline event handler declarations, it is now possible to access the event attribute through the arguments collection:

   1: <a id="id" href="#" onclick="var evt = arguments[0]; evt.preventDefault()">Click me</a>

As for canceling an event, we now have the preventDefault method that does just the same.

Raising an event is now achieved through the dispatchEvent method:

   1: var elm = document.getElementById('id');

   2: var evt = new MouseEvent('click', { bubbles: true, cancelable: true, view: window, screenX: 0, screenY: 0, clientX: 0, clientY: 0, ctrlKey: false, shiftKey: false, altKey: false, metaKey: false, button: 1, relatedTarget: elm });

   3: elm.dispatchEvent(evt);

Do notice the initializer of the MouseEvent class, this is the standard way to use it now. See the full list here.

Conclusion

Things around HTML are getting considerably better, with more commitment from browser manufacturers to standards. Whenever possible, do use them, or, better still, use jQuery and forget about it!