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: • Synchronous and Asynchronous Script Loading • Java Script Math Object Trigonometric Methods • Java Script to Get Selected Item from Drop-down Select List • Easy Animated Banners with Java Script • Calculators For Your Web Site : Length Units Converter • Let Your Web site Visitors Set Font Size • Easy Code for Date Count Down • Where Did the User Click? • Calculators for Your Web Site : Loan Payment Calculator • Easy Java Script Form Validation
|