Using addEventListener and attachEvent

On this page we demonstrate event handling using addEventListener with support for older version of Internet Explorer provided using attachEvent[1]. The purpose is to demonstrate with a simple form how functions assigned using these methods 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[2] if the criteria are not met and submission will be prevented.

Demo: addEventListener/attachEvent

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

The event handlers are assigned as shown below. We include object detection so that errors are not triggered in browsers that do not support the addEventListener and attachEvent methods:

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

if ( window.addEventListener ) {
    form.addEventListener('submit', checkOnSubmit, false);
    userFld.addEventListener('focus', showUserInfo, false);
    userFld.addEventListener('blur', checkUserInfo, false);
} else if ( window.attachEvent ) {
    form.attachEvent('onsubmit', checkOnSubmit);
    userFld.attachEvent('onfocusin', showUserInfo, false);
    userFld.attachEvent('onfocusout', checkUserInfo, false);
}

Notice that older versions of Internet Explorer use onfocusin and onfocusout events rather than focus and blur.

The functions for this example are displayed here:

function checkOnSubmit(e) {
    var fld;
    
    e = e || window.event; // for old ie
    
    // get reference to event target (form) cross-browser
    var form = e.target? e.target: e.srcElement;
    
    if ( !form.elements['terms'].checked ) { // terms checkbox checked?
        alert( 'Agree to our terms?' ); // alerts used to keep demo simple
        
        if ( e.preventDefault ) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
        
    }
    
    // check user
    fld = form.elements['user'];
    if ( fld.value.length < 8 ) {
        alert( 'Invalid user name' );
        fld.focus();
        
        if ( e.preventDefault ) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }
    
}

function showUserInfo(e) {
    e = e || window.event; // for old ie
    
    // get reference to event target cross-browser
    var tgt = e.target? e.target: e.srcElement;
    
    // to access form, other form elements
    //var form = tgt.form;
    
    tgt.className = 'active'; // display span with validation info
    
    // for old ie bug with dynamic use of adjacent sibling selector
    tgt.parentNode.className = ''; 
}

function checkUserInfo(e) {
    e = e || window.event; // for old ie
    
    // get reference to event target cross-browser
    var tgt = e.target? e.target: e.srcElement;
    
    tgt.className = '';
    
    // for old ie bug with dynamic use of adjacent sibling selector
    tgt.parentNode.className = ''; 
    
    if ( tgt.value.length < 8 ) {
        tgt.className = 'error';
    }
    
}

The standard way to obtain a reference to the target of an event is through the this keyword. However in older versions of Internet Explorer, this refers to the window when using attachEvent. So first we need a cross browser reference to the event object and then use that to obtain a reference to the event target.

e = e || window.event; // for old ie
// get reference to event target cross-browser
var tgt = e.target? e.target: e.srcElement;

In the checkOnSubmit function, in order to prevent form submission, we again need to provide extra code for old IE:

if ( e.preventDefault ) {
    e.preventDefault();
} else {
    e.returnValue = false;
}

If you have compared this approach to the other examples, you will no doubt have noticed that this is the most complicated. Generally when using the modern event model and including support for older versions of Internet Explorer, library functions will be used to negotiate the differences.[3] Fortunately, Internet Explorer 8 usage is rapidly diminishing, and there is an easier option for those who wish to support older browsers: the property assignment approach.

Back to top


  1. The attachEvent method is used by Internet Explorer prior to version 9. ^
  2. Alerts are used in these examples to keep them simple and focused. ^
  3. No need to reach for jQuery. Here is a small event file for that purpose. ^