How To Register Event Handlers in JavaScript

There are two basic ways to register event handlers in JavaScript. The first is to set a property on the object or document element that is the event target and the second is to pass the handler to a method of the object or element. You can set an event handler property in JavaScript code or for document elements.

In order to register event handlers by method invocation, there is a standard method, named addEventListner(), that is supported by all browsers except IE8 and before and another method named attachEvent()for all versions of IE before IE9.

How to Set Event Handler Properties in JavaScript

The simplest way to register an event handler is by setting a property of the event target to the desired event handler function. In this method, event handler properties have names that consist of the word “on” followed by the event name like onclick, onchange, onload, onmouseover etc.

Example:

For example, here are the JavaScript and HTML codes for setting event handler properties using simple event handler properties followed by event name onclick.

JavaScript Code:

<script>
var a=document.getElementById("button1")
a.onclick=handler1;
function handler1() {
alert("Thanks for clicking me!");
}
</script>

HTML Code:

<button id="button1">Click me</button>

Preview:

Click me

How to Set Event Handler Attributes in HTML

You can also set the event handler properties of a document element as attributes on the corresponding HTML tag. If you do this, the attribute value should be a string of JavaScript code. Therefore, that code should be the body of the event handler function, not a complete function declaration.

Also Read: How To Handle Document Load Events in JavaScript

Example:

For example, here are the JavaScript and HTML codes for setting event handler attributes in HTML where the HTML event handler attribute contains JavaScript statements.

HTML Code:

<button onclick="alert('Thank you for clicking me');">Click Here</button>

Preview:

Click Here

Since an HTML event handler attribute contains multiple JavaScript statements, you must remember to separate those statements with semicolons or to break the attribute value across multiple lines.

Read Also: How To Handle Keyboard Event In JavaScript

How to Set Event Handler by Method Invocation

There are two methods to handle event registration by method invocation, first is addEventListner(), which is supported by all browsers except IE8 and before and the second method is attachEvent() which supports for all versions of IE before IE9.

Using addEventListner()

The addEventListner() takes three arguments, the first is the event type for which the handler is being registered. The event type or name is a string and it should not include the “on” prefix that is used when setting event handler properties. The second argument to addEventListner() is the function that should be invoked when the specified type of event occurs. The final argument to addEventListner() is a Boolean value.

Example:

For example, the JavaScript and HTML codes below register the handler for the click event on a <button> element which displays the message on onclick event.

JavaScript Code:

<script>
var b=document.getElementById("button2")
b.addEventListener("click", handler2);
function handler2() {
alert("Thanks for clicking me!");
}
</script>

HTML Code:

<button id="button2">Click me</button>

Preview:

Click me

Using attachEvent()

Internet Explorer prior to IE9 does not support addEventListner() and the similar method attachEvent() is used. The difference between attachEvent() from addEventListner() is that it uses the handler property name with the “on” prefix. It also allows the same event handler function to be registered more than once. Commonly, the event handler registration code uses addEventListner() for all browsers if it supports otherwise uses attachEvent() as given in the example below.

Example:

Here is an example to show the uses of addEventListner() and attachEvent(), where addEventListner() is used for all browsers if it supports otherwise uses attachEvent().

JavaScript Code:

<script>
var d=document.getElementById("button3")
if (d.addEventListener) {
d.addEventListener("click", handler3);
} else if (d.attachEvent) {
d.attachEvent("onclick", handler3);
}
function handler3() {
alert("Hello World!");
}
</script>

HTML Code:

<button id="button3">Click me</button>

Preview:

Click me

Read Next: How To Cancel Event Handlers in JavaScript