"e.target" vs "this"

Viewing the difference between e.target and this when executing a delegated handler.

HTML

<p>Click on the various nodes below to view the differences between "e.target" and "this" when executing the delegated click handler :</p>
<div id="target" class="poopie">   
    <span class="green" data-tag="1">
        <i data-tag="1">1 -</i> <b data-tag="1">click me : <input data-tag="1" type="checkbox" /></b>
    </span>
 <span class="green" data-tag="2">
        <i data-tag="2">2 -</i> <b data-tag="2">click me : <input data-tag="2" type="checkbox" /></b>
    </span>
 <span class="green" data-tag="3">
        <i data-tag="3">3 -</i> <b data-tag="3">click me : <input data-tag="3" type="checkbox" /></b>
    </span>

</div>
<div id="log">
    <p>e.target : <span id="evtTarget">-</span>

    </p>
    <p>this : <span id="this">-</span>

    </p>
</div>

CSS

#target {margin: 36px 0}
span.green {
    diplay: inline-block;
    border: 2px solid green;
    margin: 3px;
    padding: 12px
}
span.green p {
    border: 1px solid black
}

JavaScript

function getName(node) {
    var tgt = node.localName;
    var className = node.className;
    if (className) {
        tgt += '.' + className;
    }
    var tag = node.getAttribute('data-tag');

    return tgt + ' ' + tag;
}

$('div#target').on('click', 'span.green', function (e) {
    $('#evtTarget').html(getName(e.delegateTarget));
    $('#this').html(getName(this));
});