Event Handling Using HTML Attributes

On this page we demonstrate event handling by using HTML attributes to attach event handlers to a form and form elements. This approach is regarded as obtrusive and is generally avoided these days. Nonetheless, some will still want to know how functions assigned in HTML attributes 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: HTML Event Attributes

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 form markup is displayed below, demonstrating inclusion of onsubmit, onfocus, and onblur attributes:

<form action="." method="post" class="demoForm" id="demoForm"
      onsubmit="return checkOnSubmit(this);">
    
    <fieldset>
        <legend>Demo: HTML Event Attributes</legend>
    
        <p><label for="user">User name: </label>
            <input type="text" name="user" id="user" value=""
                   onfocus="showUserInfo(event, this)"
                   onblur="checkUserInfo(event, this)" />
            <span class="info">User name must be at least 8 characters</span>
        </p>
        
        <p><input type="checkbox" name="terms" id="terms" value="agreed" />
            <label for="terms">Agree to our terms?</label></p>
        
        <p><input type="submit" name="submit" value="Submit" /></p>

    </fieldset>
    
</form>

The functions for this example are displayed here:

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

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

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

The statements in HTML event handler attributes are in essence turned into functions with the name of the attribute. For example, the statement return checkOnSubmit(this) included in the onsubmit attribute of the form becomes:

function onsubmit(event) {
    return checkOnSubmit(this);
}

The event object is passed by default in standards-compliant browsers (but not in older versions of Internet Explorer). Typcically, this is also passed in function calls included in HTML event handler attributes to refer to the object to which the event handler is attached. In the checkOnSubmit function, the parameter is named form. The showUserInfo and checkUserInfo function calls both pass event and this which are named e and el in the function definitions.[2] Function calls included in HTML event handler attributes can also pass other arguments.

Functions called from HTML event handler attributes need to be defined before the HTML elements that include them, or JavaScript errors can be triggered by early user interactions with the elements.


  1. Alerts are used in these examples to keep them simple and focused. ^
  2. e is not used inside the functions, but is included for demonstration, since event handlers often need access to the event object. ^