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フロントエンド開発

執筆者:

関連記事

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

HTML5についてのメモ書き

FileSystem API     HTML5 FileSystem Explorer Chromeの拡張機能に「HTML5 FileSystem Explorer」というツール ...

npmについて

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

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...