【jQuery】function(e){…}とかの「e」っていつ使うのか気になった

function(e){…}とかで、e.targetって使われたりするけど$(this)とかとどう違うんだろうって疑問を抱いたので備忘録がてら調べた

function(e){…}の使いどころ

javascriptのfunction(e)の「e」はイベントハンドラって言うイベントオブジェクト

クリックした場所の位置やクリックした場所の要素とか、イベントを取得できたりする

検証用コード

クリックした場所の色を変えるソースコード

<ul>
  <li><span>ボックス01</span></li>
  <li><span>ボックス02</span></li>
  <li><span>ボックス03</span></li>
  <li><span>ボックス04</span></li>
  <li><span>ボックス05</span></li>
  <li><span>ボックス06</span></li>
  <li><span>ボックス07</span></li>
  <li><span>ボックス08</span></li>
  <li><span>ボックス09</span></li>
</ul>

<script>
jQuery(function($){
  console.log($(document));//jQueryオブジェクトでdocument
  $(document).on('click', function(e){
    console.log(this);//document
    console.log($(this));//document
    console.log(e.target);//クリックした要素
    console.log(e.currentTarget);//document
    $(e.target).css("background-color","red");
  });
});
</script>

クリックした位置のHTML要素を$(e.target)で取得して色を付けている
$(this)やthisだと$(document)を参照するためクリックした箇所がどこであろうと全体に色がつく

元々は、クリックした要素が特定の要素だったら処理を変えようと思って調べ始めたので

$(document).on('click', function(e){…}

というようにドキュメント全体を対象にする書き方になってる

メモ：e.targetとe.currentTargetの違い

e.targetとe.currentTargetの違いだけど
e.targetはイベントが発生した要素(ノード)を返して
e.currentTargetはイベントが指定されている要素(ノード)を返すみたい

つまり今回のソースコードでliの中のspanをクリックしたときに

$('li').click(function (e) {
    console.log(e.target);//spanを返す
    console.log(e.currentTarget);//liを返す
}

e.targetはクリックされた要素のspanを返すんだけど、e.currentTargetはclickイベントに指定してあるliを返すって違いがある

書き方として

$(document).on('click','li', function(e){…}

って書いても大丈夫、つかこの書き方知らなかった…

メモ：$(document)ってなんだろう？

ちょっと気になった

$(document)の中身を見ているとjQueryオブジェクトでHTMLの宣言文含めた一式が入っていた

$(document)ってHTML要素へのアクセスを簡単にするための記述みたい

普通に$(document)の中身をconsole.log()で確認をするとjQueryオブジェクトなのでどこに何が書いてあるのかわからないけど
$(document).get(0)って書くとHTML要素見られる(メモ)

javascriptとしてのdocumentも同じで「HTML要素へプログラム上から簡単にアクセスできる」ってことみたい