Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.

More Java Script Code:
• Binary Subtraction with Example JavaScript Code
• Using a Select List for Navigation
• Code to Add Music to Your Webpage
• HTML5 Canvas Storing and Clearing Transformations
• Web Site Menus : Which Section Am I In?
• JavaScript Code to Make Image Wave Like a Flag
• Basic State Machines
• How to Place Image on HTML5 Canvas
• Submit Forms Without CGI
• Easy Graph Generating Code