(JavaScript) 引数にthisやeventを使う方法・違いなどを解説

本記事では、
JavaScriptのメソッド引数に「this」や「event」を使用する方法を解説していく。

両者は初心者にとって混同しがちな概念でもあるので、
thisとeventの違いが何かと言う点も明確に分かるように解説していく。

thisとeventの違いは？

先に結論から言ってしまうと、
thisとeventの違いは以下のようになる。

thisとeventの違い

thisはHTMLエレメント自体が渡ってくる
eventはイベントオブジェクトが渡ってくる

※関数の引数にthisやeventを渡す時の場合

ではより詳細に解説していく。

引数にthisを指定する

まずは引数にthisを指定する場合を解説する。

<input type="button" value="ボタン1" onclick="test1(this)">
<p>a</p>

<script>
function test1(obj){
  console.log(obj);
    # <input type="button" value="ボタン1" onclick="test1(this)">

  console.log(obj.nextElementSibling); 
    # <p>a</p>
}
</script>

1行目のonclickのメソッドの引数にthisを指定している。

そうした場合、クリック時、5行目のメソッド定義の引数：obj に、
クリックしたHTMLエレメントが渡ってくる。

この時、渡ってきたHTMLエレメントは、document.getElementByIdメソッドなどでHTMLエレメントを取得した時と同じように扱うことが可能である。

例として、8行目では、nextElementSiblingで、隣合う次のHTMLエレメントにアクセスしている。

引数thisを指定した時のポイント

thisを引数に指定すると、指定したHTMLエレメント自身がメソッド引数として渡る

引数のthisに、idやvalueなどを指定する

引数のthisには、idやvalueなどを指定することができる。

<input type="button" id="b1" value="ボタン" onclick="test1(this.id)">

<script>
function test1(id){
    console.log(id);
      # b1
}
</script>

<input type="button" id="b1" value="ボタン" onclick="test1(this.value)">

<script>
function test1(value){
    console.log(value);
      # ボタン
}
</script>

「this.id」や「this.value」のようにすることで、
引数にthisを渡す段階でHTMLエレメントが持っている属性値などを渡すことが可能となる。

thisの引数を、複数指定する

thisは引数として、複数指定することができる。

<input type="button" id="b1" value="ボタン" onclick="test1(this.id, this.value)">

<script>
function test1(id, value){
    console.log(id);
      # b1
    console.log(value);
      # ボタン
}
</script>

引数にeventを指定する

次に、引数にeventを指定する場合を解説する。

<input type="button" value="ボタン1" onclick="test1(event)">

<script>
function test1(e){
    console.log(e.target);
      # <input type="button" value="ボタン1" onclick="test1(event)">

    console.log(e.type);
      # click
}
</script>

1行目のonclickのメソッドの引数にeventを指定。

※引数として渡す段階では、「event」と言う文字以外ではダメなので注意

そうした場合、クリック時、5行目のメソッド定義の引数：e に、
様々なイベント情報が格納されたイベントオブジェクトが渡ってくる。

イベントオブジェクトは、「e.target」や、「e.type」のようにすることで、
イベントオブジェクトが保持するプロパティへアクセスすることが可能。

イベントオブジェクトが保持している値

イベントオブジェクトに格納されている情報は、発生したイベントや発生した条件によっても異なってくる。そのため、暗記する必要はないが、「このイベントの時はこんなイベント情報が取得できたな〜」と言う引き出しが増えるとjavascriptの使い方がグッと多くなるので、覚えておこう。

引数thisを指定した時のポイント

eventを引数に指定すると、様々なイベント情報が格納されたイベントオブジェクトが渡ってくる