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

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

 

JavaScriptのメソッド引数に「this」や「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」のようにすることで、イベントオブジェクトが保持するプロパティへアクセスすることが可能。

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

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

 

thisとeventの違いは?

thisとeventの違いは、
thisはHTMLエレメント自体が渡ってくるのに対し、eventはイベントオブジェクトが渡ってくると言う点だ。両者は全く異なるものだ。

 

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

 

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

 

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。