Bucaro TecHelp Design : Four Ways to Use Java Script Event Handlers

Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

[About BTH] [User Agreement] [Privacy Policy] [Site Map] [Contact Form] [Advertise on BTH] [News Feed]

Four Ways to Use Java Script Event Handlers

A third method to connect an event handler to an event is to use the attachEvent method as shown below.

<script language="JavaScript">
function popupBox()
{
alert("Hello There!");
}
document.getElementById("mybutton").
	attachEvent("onclick",popupBox);
</script>

However, the attachEvent method only works in Internet Explorer version 5 and higher and is not in the W3C standard.

A fourth method to connect an event handler to an event is to use the FOR attribute in the JavaScript tag as shown below.

<script for="mybutton" event="onclick"
	language="JavaScript">
alert("Hello There!");
</script>

This method eliminates the need to code the event handler as a function. However again, the JavaScript For attribute only works in Internet Explorer version 5 and higher and is not in the W3C standard.

Note: The latest W3C method to connect an event handler to an event is to use the addEventListener method, similar to Java. However, this is not supported by Internet Explorer, and since Internet Explorer owns 96 percent of the browser market, we can ignore addEventListener.

Which method should you use?

The most common method to connect an event to an event handler is to use an HTML event attribute. This method is also the most compatible with old browsers and it allows you to put all of your JavaScript code in an external file or in the head section of your webpage.

However, if you want to connect multiple event handlers to an object, that's easier to do in JavaScript code as shown by the example below.

<script language="JavaScript">
function popupA()
{
alert("Mouse Button Down");
}
function popupB()
{
alert("Mouse Button Up");
}
function popupC()
{
alert("Mouse Pointer Out");
}
var divObj = document.getElementById("mybutton")
divObj.onmousedown = popupA;
divObj.onmouseup = popupB;
divObj.onmouseout = popupC;
</script>

And you can still place all of your JavaScript code in an external file or in the head section of your webpage by connecting an init() event handler to the body tags onload event as shown below.

<script language="JavaScript">
var divObj

function popupA()
{
alert("Mouse Button Down");
}
function popupB()
{
alert("Mouse Button Up");
}
function popupC()
{
alert("Mouse Pointer Out");
}

function init()
{
divObj = document.getElementById("mybutton")
divObj.onmousedown = popupA;
divObj.onmouseup = popupB;
divObj.onmouseout = popupC;
}
</script>

</head>
<body onload="init();">

Almost everything on a webpage is an object that can respond to an event. You can control what an object does in response to an event by creating an event handler. This article showed you four different ways to connect an event handler to an event.