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

執筆者:

関連記事

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

ReactのJSXについて

    スタイル適用 Reactでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することが可能 classNameとstyle サー ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

TypeScriptのソールファイル分割

TypeScriptのソールファイル分割の方法についてまとめました   目次1. <reference>によるグローバルモジュールによる方法2.import/exportによる外 ...

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...


プロフィール
管理人です。 業務プログラムに勤しむ人です プロフィール詳細


検索

カテゴリ

アーカイブ