Event Handler Properties Example

On this page we demonstrate event handling by assigning functions to event handler properties. The purpose is to demonstrate with a simple form how the functions assigned to event handler properties can access the objects and properties they need for handling the event.

For the demo below, a class change onfocus displays user entry information for the text box. Onblur, another class change indicates whether the entry is valid. Onsubmit, both the text box and terms checkbox are validated. The user will be informed[1] if the criteria are not met and submission will be prevented.

Demo: Event Handler Properties

User name must be at least 8 characters

Compare this approach with other event handling methods discussed earlier. Examples demonstrating other ways to attach event handlers are listed in the right sidebar.

JavaScript for the Example

DOM elements have properties matching the events that they support. That is, since the text box supports a focus event, it has an onfocus property to which you can assign a function. You can obtain references[2] to the form and form elements and assign functions to event handler properties as follows:

var form = document.getElementById('demoForm');
var user = form.elements['user'];
form.onsubmit = checkOnSubmit;
user.onfocus = showUserInfo;
user.onblur = checkUserInfo;

The functions for this example are displayed here:

function checkOnSubmit(e) {
    var fld;
    if ( !this.elements['terms'].checked ) { // terms checkbox checked?
        alert( 'Agree to our terms?' ); // alerts used to keep demo simple
        return false; // prevent submission
    }
    
    fld = this.elements['user'];
    if ( fld.value.length < 8 ) {
        alert( 'Invalid user name' );
        fld.focus(); // put cursor in fld
        return false;
    }
    
    return true;
}

function showUserInfo(e) {
    //e = e? e: window.event; // for old ie
    //alert(e.type); // access event properties
    //var form = this.form; // to access form 
    //var terms = form.elements['terms']; // acccess other form elements
    //alert(terms.value);
    
    this.className = 'active'; // display span with validation info
    // for old ie bug with dynamic use of adjacent sibling selector
    this.parentNode.className = ''; 
}

function checkUserInfo(e) {
    this.className = ''; // remove active class
    // for old ie bug with dynamic use of adjacent sibling selector
    this.parentNode.className = '';
    
    if ( this.value.length < 8 ) {
        this.className = 'error';
    }
}

As discussed earlier, the this keyword is available inside functions attached to event handler properties to provide access to the object on which the event occurred. The above functions demonstrate using this to access properties such as elements, value, className, etc.

The event object is automatically passed to event handler functions (e in the above functions) to provide access to the triggering event and its properties. However, for older versions of Internet Explorer, the event object is not passed but instead available as a property of the window object. So a bit of extra JavaScript is necessary to ensure access to the event object, as shown here:

function showUserInfo(e) {
    e = e? e: window.event; // for old ie
    alert(e.type); // access event properties
    // ...
}

Even though this simple example does not use the event object, this demonstrates how you can access it cross-browser.

Back to top


  1. Alerts are used in these examples to keep them simple and focused. ^
  2. Various methods for Obtaining References to Forms and Form Elements are described in another part of the JavaScript and Forms Tutorial. ^