jQueryのデリゲートをつかった際のコールバック関数内でのthisを確認する

jQuery の on の第2引数にセレクタを渡すとデリゲートでイベントを張ることができます。

例えば、

$("ul").on("click", "li", callback);

function(evt) {
  //...
}

という感じでulにイベントを張った際callback内の、
this は li、
evt.target も li、
evt.delegateTarget は ul となります。

HTML

<ul class="btns">
    <li class="btn">0</li>
    <li class="btn">1</li>
    <li class="btn">2</li>
</ul>

JavaScript

$(function() {

    "use strict";
    
    $("ul").on("click", "li", function(evt) {
        console.log("this　: =>");
        console.log(this);
        console.log("________");
        console.log("target: =>");
        console.log(evt.target);
        console.log("________");
        console.log("delegateTarget: =>");
        console.log(evt.delegateTarget);
        console.log("________");
    });
    
});

DEMO

---

https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます！