Event Delegation

Binding events to a parent element vs. binding to individual elements.

by MoonScript

HTML

<form onsubmit="return false">
    <p>
        First name:<br/>
        <input type="text" name="first-name"/>
    </p>
    <p>
        Last name:<br/>
        <input type="text" name="last-name"/>
    </p>
    <p>
        Address:<br/>
        <input type="text" name="street"/>
    </p>
    <p>
        City:<br/>
        <input type="text" name="city"/>
    </p>
    <p>
        Zip Code:<br/>
        <input type="text" maxlength="5" pattern="\d{5}" title="Exactly 5 digits" name="zip"/>
    </p>
    <div class="button-group">
        <input type="submit" value="Submit form"/>
        <button id="test-input">Leave page</button>
    </div>
</form>
<div id="debug-output"></div>

CSS

.button-group {margin-top: 5px;}
#debug-output {width: 400px; border: 1px solid #CCC; margin-top: 20px; padding: 10px;}

JavaScript

var formTouched = false, elementsBound = 0;

$('#test-input').click(function(){
    if (formTouched) {
        confirm('You have unsaved changes. Click OK to discard and leave, Cancel to stay.');
    }
});

// Typical event binding
elementsBound = $('input[type!="submit"]').change(function(e){
    formTouched = true;
}).length;

// Using event delegation
/*
elementsBound = $('form').change(function(e){
    formTouched = true;
    console.log(e);
    //e.stopPropagation();
    if ($(e.target).is('input[type="number"]')) {
        // Handle the zip code onchange event differently
    }
}).length;
*/

$('#debug-output').html('Elements bound with <em>onchange</em> event: '+elementsBound);