The Internet Explorer Event Model: Standard Event Handlers - Doc JavaScript | 2

Standard Event Handlers

Internet Explorer 4.0x supports the two most basic event handler methods:

• HTML attribute
• Property assignment

Consider the following form definition:

<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton" VALUE="click here">
</FORM>

When you click the button, nothing happens because no script or function is attached to its click event. For instance, you could associate it with a function that generates an alert dialog box by placing an onClick event handler script in the body of the tag:

<SCRIPT LANGUAGE="JavaScript">
<!--
function myAlert() {
  alert("Thank you for clicking the button.");
}
// -->
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton" 
       VALUE="click here" onClick="myAlert()">
</FORM>

For more information on this approach, take a look at the event handler page in Column 9. Once you've read it, click the browser's Back button to return.

Another way to associate a function with a specific event is to assign its reference to the object's event handler property:

<SCRIPT LANGUAGE="JavaScript">
<!--
function myAlert() {
  alert("Thank you for clicking the button.");
}
// -->
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton" VALUE="click here">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.myForm.myButton.onclick = myAlert;
// -->
</SCRIPT>

Once again, if you aren't familiar with this technique, I strongly recommend reading the properties page in Column 9. Even though that column deals with the event model in Navigator 4.0x, these event handler approaches are fundamental, and are supported by Internet Explorer 4.0x as well. The entire event model is based on the ability to capture and process events with event handlers.

Created: December 30, 1997
Revised: December 30, 1997

URL: https://www.webreference.com/js/column10/eventhandlers.html