How to attach a JavaScript event handler on the fly, using JavaScript?

home / software / tips and tricks / How to attach a JavaScript event handler on the fly, using JavaScript?

How to attach a JavaScript event handler on the fly, using JavaScript?

Category: Java Script
view more software Tips and Tricks

Updated: 11/01/2012 11:11 AM
Author: Shiju Mathews

Status: Resolved.

On the fly we can registers an event handler function (event listener) for the specified event on an object.

addEventListener(): Allows the registration of event listeners on the event target for all browsers except IE before version 9.
Syntax: object.addEventListener (eventName, function, useCapture);

attachEvent():Allows the registration of event listeners on the event target for IE before version 9.
Syntax: object.attachEvent (eventName, function);

The same way we can unregister (detach) an event handler function (event listener) for the specified event on an object.

removeEventListener(): Allows to unregistrater the event listeners on the event target for all browsers except IE before version 9.
Syntax: object.removeEventListener(eventName, function, useCapture);

detachEvent():Allows to unregistrater the event listeners on the event target for IE before version 9.
Syntax: object.detachEvent(eventName, function);

Code Sample

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function OnRedClick() {
alert("Button Clicked.");
}
function AddEventHandler() {
var TestButton = document.getElementById("TestButton");
if (TestButton.addEventListener) { // all browsers except IE before version 9
TestButton.addEventListener("click", OnRedClick, false);
}
else {
if (TestButton.attachEvent) { // IE before version 9
TestButton.attachEvent('onclick', OnRedClick);
}
}
}
function RemoveEventHandler() {
var TestButton = document.getElementById("TestButton");
if (TestButton.removeEventListener) { // all browsers except IE before version 9
TestButton.removeEventListener("click", OnRedClick, false);
}
else {
if (TestButton.detachEvent) { // IE before version 9
TestButton.detachEvent('onclick', OnRedClick);
}
}
}
</script>
</head>
<body>
Click the button to attach/ detach the event.<br />
<button onclick="AddEventHandler ();">Add event listener</button>
<button onclick="RemoveEventHandler ();">Remove event listener</button>
<br /><br />
<button id="TestButton">Test button</button>
</body>
</html>

Indian Resources by Category

Indian Grocery Stores

Indian Jewelry Stores

Indian Hindu Temple

alt="Add your business to our listing Free"

Software Resources

Tips and Tricks

Interview Questions for C#

Interview Questions for ASP.Net

Interview Questions for SQL Server