There are two basic ways to register event handler 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.
For handler registration 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:
Here is an example for setting event handler properties in JavaScript 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
var a=document.getElementById(“button1”)
a.onclick=handler1;
function handler1() {
alert(“Thanks for clicking me!”);
}
How to Set Event Handler Attributes in HTML
The event handler properties of a document element can also be set as attributes on the corresponding HTML tag. If you do this, the attribute value should be a string of JavaScript code. That code should be the body of the event handler function, not a complete function declaration.
Example:
Here is an example for setting event handler attributes in HTML where HTML event handler attribute contains JavaScript statements.
HTML Code:
<button onclick=”alert(‘Thank you for clicking me’);”>Click Here</button>
Preview:
Click Here
If 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.
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()
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:
The code below registers handler for the click event on a <button> element which displays 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
var b=document.getElementById(“button2”)
b.addEventListener(“click”, handler2);
function handler2() {
alert(“Thanks for clicking me!”);
}
Using attachEvent()
Internet Explorer prior to IE9 does not support addEventListner() and the similar method attachEvent() is used. The difference of attachEvent() from addEventListner() is that, it uses handler property name with the “on” prefix. It also allows the same event handler function to be registered more than once. Commonly, event handler registration code uses addEventListner() for all browsers if it supports otherwise uses attachEvent() as given on 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
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!”);
}
