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

By Stephen Bucaro

On a webpage you might find buttons, checkboxes, links, text, and so on. Almost everything on a webpage is an "object". For example, text may be contained in paragraph object. Almost all objects can respond to an event. An event can be triggered by the user. For example, an onClick event is triggered when the user clicks on a button. An event can also be triggered by a browser action. For example, an onLoad event is triggered when a webpage completes loading.

You can control what an object does in response to an event by creating an event handler. An event handler might be a JavaScript function that performs some action, such as display a message box. You make objects on a webpage respond to events by connecting an event handler to an event. In this article, you'll learn four different ways to connect an event handler to an event.

The most common method to connect an event to an event handler is to use an HTML event attribute. For example, the html code below creates an html span object containing the text "Click Me".

<html>
<head>
</head>
<body>

<span onClick="popupBox()">Click Me</span>

<script language="JavaScript">
function popupBox()
{
alert("Hello There!");
}
</script>

</body>
</html>

The code above also creates a JavaScript code block containing an event handler function named "popupBox". When executed, the function creates a message box displaying the message "Hello There!".

The attribute onClick="popupBox()" in the span tag connects the "popupBox" event handler to the htmls span tag's onClick event. When you open the webpage in your browser and click on the text, a message box appears displaying the message "Hello There!".

It's more common to connect an event handler to the onClick event of a button object, but a span object and most other html objects also contain the onClick event. The above example shows a quick way to create a button on a webpage that is not associated with a form object.

A second method to connect an event handler to an event is in the JavaScript code. To do this, you need to give the span an id attribute as shown below.

<span id="mybutton">Click Me</span>

Then add the line document.getElementById("mybutton").onclick = popupBox; to the JavaScript code block as shown below. (Note that the event name onclick must use all small letters.)

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

Again, when you open the webpage in your browser and click on the text, a message box appears displaying the message "Hello There!".

If the object was contained within a form (for example a button on a form), you could address it using the line shown below.

document.formName.buttonName.onclick = popupBox;

If the object is the browser window itself, you could use the line shown below.

window.onscroll = popupBox;

Note: The window object doesn't have an onclick event. To test this example, you'll need to have enough text on the webpage to cause a scrollbar to appear.