イベントハンドラの引数eと、$(this)の違いについて。

Question

毎度お世話になっています。
jqueryを勉強中に気になったことがあったのと、検索をかけても満足を得るほどの回答がなかったので質問させていただきたいです。

jqueryで、たとえばtabのコンテンツを作っている時に、ブラウザの動作を止める際に

JqueryObject.click(function(e){

   e.preventDefault();

}
とする、というのは分かりました。
しかし、まずこのeとはなにか。急にどこから出てきたのか、と思い、検索をかけたところこれが色々なデータを有したjqueryのオブジェクト型のデータである、ということは分かりました。

ただ、クリックした要素であるのならば$(this)のようなものや、それの子孫などの要素ならばそこからfindメソッドを使えば見つけることはできるのでは、と頭をよぎり出して、この二つはどういう違いがあるのか！？と分からなくなりました。console.logでしらべると同じ値で出てきたのでますます分かっていない状態です。 どなたか教えていただけると助かります。

Answer 1

    <div id="hoge">hoge</div>

<script>
        $("#hoge").click(function(e){
              console.log(this);
              console.log($(this));
              console.log(e);
              console.log($(e));
});
</script>

これを試してみたらわかると思いますが、別物です。thisはクリックしたdiv#hogeを指していて、eはクリックしたイベントを指しています。

Comments

[lack_un]

なるほど、イベントそのものを指している、ということですか。。
ありがとうございます。

Answer 2

一般に無名関数に渡すeはイベントです

<script>
document.addEventListener ('click',function(e){alert(e)},true);
</script>

として、画面をクリックするとイベントだとわかります