How to add a JavaScript event handler to an HTML page element?

In this article, we are going to learn JavaScript event handler. There are two ways to add event handler to an HTML element.

An old-fashioned way of registering event handlers for page elements which is still widely supported in browsers. These techniques are very simple as explained in below code but they have some disadvantages.

Inline event handlers, for example:

<a href="home.html" onlick="alert('Thanks')">Logout</a>

These event handlers added as an HTML tag attributes

Event handlers added by assignment, for example:

document.onclick=clickHandlerFunction; document.onkeydown=keyHandlerFunction;

By using Inline event handlers you get very poor separation of JavaScript code from HTML markup.

Modern browsers provide additional programmatic ways of registering event handlers for page elements, allowing you to dynamically add one or more handlers during the webpage lifecycle. For example, you can programmatically add handlerFunction as an onclick event handler for an element by using these methods:

element.attachEvent('onclick',handlerFunction); 
// in Internet Explorer 5 or newer

element.addEventListener('click',handlerFunction,false); 
// in most non-IE browsers (Google Chrome, FireFox, Safari, Opera etc) and IE9

element.attachEvent('onclick',handlerFunction);

In this event handler method, first argument is event type and second one is function to call once the event has been triggered.

element.addEventListener('click',handlerFunction,false);

Here in this event handler method, first argument is also event type and second is also same as above means function to call once the event has been triggered. But what about third argument?

The third argument is having Boolean type, here false in addEventListener specifies that the event capturing phase should not be used, and the event should be handled during the bubbling phase of the event propagation. So what is event bubbling?

The concept of event bubbling was introduced to deal with situations where a single event, such as a mouse click, may be handled by two or more event handlers defined at different levels of the Document Object Model (DOM) hierarchy.

This is all about JavaScript event handler.

You can combine the above calls together in a cross-browser function addEventHandler:

function addEventHandler(elem, eventType, handler) { if (elem.addEventListener) elem.addEventListener (eventType, handler, false); else if (elem.attachEvent) elem.attachEvent ('on' + eventType, handler); }

For both of the methods the arguments are as follows:
1. the event type.
2. the function to call once the event has been triggered.
3. (addEventListener only) If true, indicates that the user wishes to initiate capture.

Here is an example of calling the addEventHandler function to add event handlers to two buttons with id="btn1" and id="btn2":

var sEventType = 'click'; var b1 = document.getElementById('btn1'); var b2 = document.getElementById('btn2'); addEventHandler(b1,sEventType,handlerFunction1); addEventHandler(b2,sEventType,handlerFunction2);
Conclusion :

I hope that this article would have helped you in understanding to add a JavaScript event handler to an HTML page element. Please share your knowledge if you know more about this attribute. Your feedback and constructive contributions are always welcome.