Almost everything on a webpage is an "object". Almost all objects can respond to an event. You can control what an object does in response to an event by creating an event handler. In this article, you'll learn four different ways to connect an event handler to an event.
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

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.

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-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268