e.currentTarget vs e.target

by pmn4

HTML

<a href="#" role="button" class="btn" id="the-thing-i-want">
  <span class="some-styling-class">Trigger Event Handler</span>
</a>
<hr />
<pre id="console"></pre>

CSS

.some-styling-class {
    display: block;
    padding: 10px;
    color: red;
    font-size: 2em;
    font-style: bold;
}

JavaScript

// you create an event handler on the thing you want
// but, it is triggered when it, or any of it ancestors
// are clicked.  e.target refers to the thing that was
// clicked (either this element, or one of it's ancestors)
// so you must refer to e.currentTarget to get the element
// on which the event handler was created
$("#the-thing-i-want").click(function (e) {
    log("e.target id: " + e.target.id);
    log("e.currentTarget id: " + e.currentTarget.id);
});


/////////////////////////////////////////
function log(msg) {
    $("#console").append(msg + "\n");
}