jQueryでのイベントコールバックの"this"を考える

jQuery におけるthisの扱いについて、簡単なメモというか案外忘れがちなこと。

<ul id="tgs">
     <li>Hitomi</li>
     <li>Miyu</li>
     <li>Yuri</li>
     <li>Mei</li>
     <li>Ayano</li>
</ul>

のようになっている場合、
Hitomiがクリックされた時、このリストの何番目？を取得する
「index()」というメソッドに投げるオブジェクトについて、メモ。

$('#tgs li').click(function() {
     var index = $('#tgs.li').index(this);
     console.log(index);
});

これで、ひっとをクリックすると、コンソールに「> 0」と入るのですが、
これって、要はthisがイベントの対象となるオブジェクトが帰ってくるので、
言い換えると、イベントオブジェクトのターゲットを入れてあげることに同義なんですね。

$('#tgs li').click(function(event) {
     var index = $('#tgs.li').index(event.target);
     console.log(index);
});

あたりまえのことなんですけどねー。