|
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.
| 
Free Downloads
RSS Feed