Modern Event Handling Example

On this page we provide an example that uses addEventListener to attach event handlers to DOM elements in JavaScript. The purpose is to demonstrate with a simple form how functions assigned using addEventListener 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: Modern Event Model

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

This example does not provide support for Internet Explorer 8 and earlier. (Another example does.) We include object detection so that errors are not triggered in browsers that do not support the addEventListener method:

var form = document.getElementById('demoForm');
var userFld = form.elements['user'];

if ( window.addEventListener ) { // avoid errors in incapable browsers
    form.addEventListener('submit', checkOnSubmit, true);
    userFld.addEventListener('focus', showUserInfo, false);
    userFld.addEventListener('blur', checkUserInfo, false);
}

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
        e.preventDefault(); // prevent submission (return false won't work)
    }
    
    // check user
    fld = this.elements['user'];
    if ( fld.value.length < 8 ) {
        alert( 'Invalid user name' );
        fld.focus();
        e.preventDefault();
    }
    
}

function showUserInfo(e) {
    //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
}

function checkUserInfo(e) {
    this.className = '';
    
    if ( this.value.length < 8 ) {
        this.className = 'error';
    }
}

As discussed earlier, the this keyword is available inside functions attached using the addEventListener method 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. Notice that the e.preventDefault method is used instead of return false to prevent submission of the form. When using addEventListener to attach events, the modern event model should be used throughout the handler functions since mixing old and new event models does not work.

Back to top


  1. Alerts are used in these examples to keep them simple and focused. ^