- Level: Advanced
- Skills Required: Functions, Events and Objects
Abstract:
Continuing with the theme picked up in the last article, today we will see how to declare default event handlers. Default event handlers fire (or are called up) when the associated event occurs, without requiring a programmer to write explicit code. Along with that we will also see the event object - a relatively newer entry in the field of event handling.
Defining Event Handlers
You can set up a function such that its always called when some particular button is clicked. You, perhaps, already know the onClick="myFunction()" way. But another technique also exists as depicted in the following code.
<html>
<head>
<script language="JavaScript1.2">
function clicked() {
alert ("I am called.");
}
</script>
</head>
<body>
<form name="test">
<input type="button" value="Click" name="myButton">
<script language="JavaScript1.2">
document.test.myButton.onclick=clicked;
</script>
</body>
</html>
Although we are achieving very less, its worth looking into this code. We are declaring a function, clicked() in the head part of the html document. Next, a form, test, is created in the body part having a button, named myButton. Note there is no event attached with this button inside the <input type="button"...> tag. Next, some JavaScript code is written. The code is assigning the function name (clicked) to the onclick event of myButton.
The code written above has been tested with both IE 5.0 and Netscape 6. Note one thing, though. We have registered our function as a click handler of myButton after defining the button. In JavaScript, there is no way of referring an object before its creation. The event handler can only be registered after the button is created.
Available Handlers:
The following list is of events that are old and browser independent. They work with both Netscape and IE. They are given here just to give you an idea of what you can register.
| onAbort | image |
| onBlur | select, text, text area |
| onChange | select, text, text area |
| onClick | button, checkbox, radio, link, reset, submit, area |
| onError | image |
| onFocus | select, text, textarea |
| onLoad | windows, image |
| onMouseOver | link, area |
| onMouseOut | link, area |
| onSelect | text, textarea |
| onSubmit | form |
| onUnload | window, image |
Event Object:
Starting with version 4.0, both Netscape Navigator and Internet Explorer introduced a new object: the event object. Like other objects, it also possess attributes and methods that give a black box concept to the outside world. For example, the attributes screenX and screenY represent the mouse co-ordinates when the event occurred.
Go To Page: 1 2
