WEB WEBフロントエンド開発

JavascriptのEventオブジェクトについて

投稿日:2017年11月22日 更新日:

1.function(e) {} の引数eの意味合い

  • 引数eはイベントオブジェクトです。イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる。
  • JavaScriptの関数は引数を指定しなくてもOKなので、イベントオブジェクトを省略してもエラーとはならないので、省略される場合もあり。
  • イベントの発生タイミングで呼び出す関数を「コールバック関数」ではなく、「イベントハンドラ」or「イベントリスナ」と呼ぶ。
  • イベント発生時の情報をイベントオブジェクトとして引数に受け取ることができる。これはJavaScript側で自動的に、イベントハンドラに指定したコールバック関数へ渡してくれるもの。
  • イベントハンドラとして設定したコールバック関数の引数にイベントオブジェクト「e」を設定しています。「e」はイベント発生時の情報を持つオブジェクトなので「e.target.id」のように情報を得ることが可能。

 

関数の引数とオブジェクト(argument)

  • JavaScriptでは関数の引数は無くても良く、エラーにはならない。
  • 関数内では引数を暗黙的に組み込まれているオブジェクト「argments」で参照することができる。
  • オブジェクト「arguments」は配列形式になっていて、イベントハンドラ、イベントリスナは第1引数にイベントオブジェクトを渡すため「arguments[0]」として参照することができる。イベントハンドラに設定したコールバック関数に「e」を指定した場合と同じ挙動となる。
  • 一般的にはイベントハンドラやイベントリスナの中でイベントオブジェクトの情報を使いたいときには明示的に「e」と引数を受け取って関数内で使用している。

 

ハンドラ関数の引数を渡し方

(例)

  • テスト1:undefined表示。test関数が引数なしとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
  • テスト2:eventオブジェクト表示とtest関数が引数ありとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
  • テスト3:eventオブジェクト表示。"test"文字表示。test2関数が引数ありとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
  • テスト4:eventオブジェクト表示。
  • テスト5:eventオブジェクト表示と"test"文字表示。無名関数でbtn5のクリックイベントのハンドラを渡し、無名関数の中で、test2を実行している。最後が()になっている。event引数を無名関数からtest2に渡している。

 

 

 

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

ES6のクラス定義について

  概要 JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。 プロトタイプを使ってクラスと同等なことを実現するというこ ...

Javascriptのアロー関数について

  アロー関数 ES2015(ES6)の新構文の一つ 無名関数の省略記法。 無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要。 =>(矢)を使 ...

npmについて

コマンドについて ・コマンド コマンド 説明 npm init 対話形式で項目を入力してpackage.jsonを作成します。 npm init -y デフォルト値でpackage.jsonを作成しま ...

SEO対策のまとめ

SEO対策は良く言われるように、(1)クローラーの巡回フェーズ、(2)ページのインデックス登録フェーズ、(3)検索順位決定フェーズの3つのフェーズで考える必要があるようです。SEO対策は様々なWEBペ ...

Cordovaのメモ書き

  devicereadyイベント   Cordovaのアプリが実行される時、Cordovaが提供しているネイティブ機能をHTML5側からすぐに呼び出せることが出来ない。 Cordovaフレ ...