jQuery Delegation Experience

by Bacher

HTML

<div class="outer">Outer
    <div class="subouter">Subouter
        <div class="medium">Medium
            <div class="subinner">Subinner
                <div class="inner">Inner
                    <br />
                    <a href="#">Anchor Link</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div {
    padding: 5px 4px 10px 25px;
}

.outer    { background: #57b; }
.subouter { background: #58c; }
.medium   { background: #69d; }
.subinner { background: #6ae; }
.inner    { background: #9cf; }

JavaScript

var log = console.log.bind(console, '[Event]');
var jlog = log.bind(window, '[jQuery]');
var vlog = log.bind(window, '[Vanilla]');

$('body').on('click', 'a', function(ev) {
    jlog('body a click', ev);
});

$('.outer').on('click', 'a', function(ev) {
    jlog('.outer a click', ev);
});

$('a').click(function(ev) {
    jlog('a click', ev);
});

$(function() {
    window.addEventListener('click', function(ev) {
        vlog('window click capture', ev); 
        
        if (ev.ctrlKey || ev.metaKey || ev.button === 1) {
            vlog('potentially new tab');   
        }
    }, true);
    
    window.addEventListener('click', function(ev) {
        vlog('window click bubble', ev); 
    });
});