Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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:
• Easy Slide Show Code With Linked Slides
• Calendars for Your Website
• Using the Java Script Date Object
• Easy Java Script Timer Code
• Object-Oriented JavaScript
• Easy Fading Text Banner Code
• Easy JavaScript Form Design
• JavaScript Code to Display Wait Cursor While Image Loads
• Using the Java Script Array Object
• JavaScript Code for Binary to Decimal - Decimal to Binary Conversion

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268