ログインして、MDNアカウントの特典をお楽しみください。アカウントを作成していない場合は、ログイン後、作成を促されます。, このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、, Document Object Model (DOM) Level 2 Events Specification, https://github.com/mdn/browser-compat-data, イベントに複数のハンドラーを追加することができます。これは、特に、他のライブラリ/拡張で利用しても上手く動作する必要がある, リスナーがアクティブ化されたときに、その動きを細かく制御することを可能にします (キャプチャリング 対 バブリング)。. その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。 EventTarget の addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます (XMLHttpRequest など)。, addEventListener() は関数または EventListener を実装したオブジェクトを、呼び出される EventTarget における指定されたイベント種別のイベントリスナーのリストに加えることで動作します。, イベントリスナーには、コールバック関数を指定することもできますが、 EventListener を実装したオブジェクトを指定することもでき、その場合は handleEvent() メソッドがコールバック関数として機能します。, コールバック関数自体は、 handleEvent() メソッドと同じ引数と返値を持ちます。つまり、コールバック関数は発生したイベントを説明する Event に基づいたオブジェクトを唯一の引数として受け付け、何も返しません。, たとえば、次のイベントハンドラーコールバックは、 fullscreenchange および fullscreenerror の両方を処理するために使用することができます。, DOM 仕様書の古い版では、 addEventListener() の第 3 引数はキャプチャーを使用するかどうかを示す論理値でした。時間の経過とともに、より多くのオプションが必要であることが明らかになりました。関数にさらに多くの引数を追加する (オプションの値を扱うときに非常に複雑になります) のではなく、第 3 引数は、イベントリスナーを削除する過程を設定するためのオプションの値を定義するさまざまなプロパティを含むことができるオブジェクトに変更されました。, 古いブラウザーは (あまり古くないブラウザーも含めて) 第 3 引数がまだ論理であると仮定しているので、このシナリオをインテリジェントに処理できるようにコードを構築する必要があります。これを行うには、興味のあるオプションごとに機能検出を使用します。, これは、 options オブジェクトを生成し、 passive プロパティのゲッター関数を持たせます。ゲッターは、呼ばれた場合に passiveSupported フラグを true に設定します。つまり、ブラウザーが passive プロパティの値を options オブジェクトでチェックした場合、 passiveSupported は true に設定され、そうでなければ false のままになります。次に addEventListener() を呼び出して、これらのオプションを指定して偽のイベント・ハンドラーをセットアップし、ブラウザーが第 3 引数としてオブジェクトを認識した場合にオプションがチェックされるようにします。その後、 removeEventListener() を呼び出して、自分たちで後始末をします。 (呼ばれていないイベントリスナーでは handleEvent() は無視されることに注意してください。), この方法で、任意のオプションに対応しているかどうかを確認することができます。上に示したようなコードを使って、そのオプションのゲッターを追加するだけです。, そして、問題のオプションを使用する実際のイベントリスナーを作成したい場合は、次のようにします。, ここでは、 mouseup イベントのリスナーを someElement 要素に追加しています。第 3 引数の passiveSupported が true である場合、 options オブジェクトを passive を true に設定して指定しています。そうでない場合は、論理値を渡す必要があることがわかっているので、 useCapture 引数の値として false を渡しています。, ご希望であれば、 Modernizr や Detect It のようなサードパーティ製のライブラリを使用してこのテストを行うことができます。, Web Incubator Community Group の EventListenerOptions の記事を参考にしてください。, この例は、要素上でのマウスクリックを監視するための addEventListener() の使い方を紹介します。, このコードの中で、 modifyText() が addEventListener() を使用して登録された click イベントのリスナーです。表の中のどこかをクリックすると、ハンドラーに上がり、 modifyText() を実行します。, なお、リスナーは実際にイベントに応答する modifyText() 関数に引数を送信することができるコードをカプセル化している無名関数であることに注意してください。, この例はアロー関数表記を使用して実装された、簡単なイベントリスナーを紹介しています。, なお、無名関数とアロー関数は似ており、違いは this のバインドです。無名関数 (及び伝統的なすべての JavaScript 関数) は自身の this を作成するのに対し、アロー関数はそれを含む関数の this を継承します。, つまり、アロー関数を使用したときは、それを含む関数の変数や定数をイベントハンドラーで利用することができます。, 外側、中央、内側のコンテナーをそれぞれクリックして、オプションがどのように動作するかを確認してください。, options オブジェクトで特定の値を使用する前に、ユーザーのブラウザーがそれに対応していることを確認するのが良いでしょう。詳細はオプションの対応の安全な検出を参照してください。, addEventListener() は、 W3C DOM で仕様化されている、イベントリスナーを登録するための方法です。その利点は以下の通りです。, EventListener がイベント処理中に EventTarget に追加された場合、それが現在のアクションによって実行されることはありませんが、バブリングフェーズのように、後の段階のイベントフローで実行されるかもしれません。, 複数の同一の EventListener が、同じ EventTarget に同じ引数で登録された場合、重複するインスタンスは反映されません。 EventListener が 2 回呼び出されることはなく、重複するインスタンスは反映されないので、 removeEventListener() で手動で削除する必要はありません。, ただし、無名関数をハンドラーとして使用する場合、そのようなリスナーは同じにはならないことに注意してください。無名関数はループ内であっても繰り返し呼び出されるだけで、同じソースコードを使って定義されていても同じにはならないためです。, ただし、このような場合に同じ名前の関数を繰り返し定義することは、より問題になる可能性があります (後述のメモリの問題を参照してください)。, 一連の類似した要素に対して一般的なハンドラーを使いたい場合のように、イベントハンドラーが実行される要素を参照したいということがたびたびあります。, addEventListener() を使って要素にハンドラー関数を設定したとき、ハンドラーの中の this の値は要素への参照となります。これはハンドラーに渡された event 引数の currentTarget プロパティの値と同じです。, イベントハンドラー (例えば onclick) が HTML ソース内の要素に指定されていた場合、属性値の Javascirpt コードは、 addEventListener() を使用するような方法で this の値をバインドしたハンドラー関数に置き換えられます。コード内に this が現れた場合には、要素への参照を表します。, this の値は、属性値の中のコードによって呼び出される関数内では、標準的な規則に従って振る舞うことに注意してください。これは次の例で示されています。, this は logID() 内においては、グローバルオブジェクト Window (または厳格モードの場合は undefinedになります。, Function.prototype.bind() メソッドで、その関数のすべての呼び出しにおいて this として使用される値を指定できます。これを使えば、関数がどこから呼び出されるかによって this の値が変わってしまうというややこしい問題を簡単に回避できます。ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。, 上の例の問題は、 bind() の付いたリスナーを削除できないということです。もうひとつの解決策は、あらゆるイベントを捕捉する handleEvent() という特別な関数を使用することです。, this の参照を扱うためのもう一つの方法は、 EventListener にアクセスする必要のあるフィールドを含むオブジェクトのメソッドを呼び出す関数を渡すことです。, イベントリスナーは島のようなもので、それらにデータを渡すのは非常に難しく、ましてや実行後にそれらからデータを取り出すのは非常に難しいと思われるかもしれません。イベントリスナーは、イベントオブジェクトという1つの引数を取るだけで、それは自動的にリスナーに渡され、返値が無視されるからです。では、どのようにしてデータを渡したり、取り出したりすることができるのでしょうか？これを行うための良い方法がいくつかあります。, 前述の通り、 Function.prototype.bind() を使用すると this 参照変数を通じてイベントリスナーに値を渡すことができます。, この方法は、イベントリスナーの中からプログラムでイベントリスナーがどの HTML 要素で発生したかを知る必要がない場合に適しています。これを行う主な利点は、実際に引数リストにデータを渡す場合とほぼ同じ方法でイベントリスナーがデータを受け取ることです。, 外部スコープに (const, let を付けた) 変数宣言が含まれている場合、そのスコープで宣言されたすべての内部関数はその変数にアクセスすることができます(外部関数/内部関数についてはこちらを、変数スコープについてはこちらを参照してください)。したがって、イベントリスナーの外部からデータにアクセスする最も簡単な方法の1つは、イベントリスナーが宣言されているスコープにアクセスできるようにすることです。, 注: 内側のスコープは外側のスコープにある const, let 変数にアクセスすることができますが、イベントリスナーの定義後に、同じ外側のスコープ内でこれらの変数にアクセスできるようになることは期待できません。なぜでしょうか？単純に、イベントリスナーが実行される頃には、イベントリスナーが定義されたスコープは既に実行を終了しているからです。, JavaScript のほとんどの関数とは異なり、オブジェクトはそのオブジェクトを参照する変数がメモリ内に存在する限り、メモリ内に保持されます。それに加えて、オブジェクトはプロパティを持つことができ、参照によって渡すことができることから、スコープ間でデータを共有するための有力な候補となります。これについて調べてみましょう。, 注: JavaScript の関数は厳密にはオブジェクトです。 (そのため、プロパティを持つことができ、メモリ内に永続的に存在する変数に代入されていれば、実行終了後もメモリ内に保持されます。), オブジェクトを参照する変数がメモリに存在する限り、オブジェクトのプロパティを使用してメモリにデータを格納することができるので、実際にそれらを使用して、イベントリスナーにデータを渡し、イベントハンドラーが実行された後でデータに変更があった場合には、それを戻すことができます。この例を考えてみましょう。, この例では、イベントリスナーとインターバル関数の両方が定義されているスコープは、 someObject.aProperty の元の値が変更される前に実行を終了していたとしても、イベントリスナーとインターバル関数の両方で someObject がメモリ内に (参照によって) 持続するため、両方とも同じデータにアクセスできます (つまり、一方がデータを変更したときに、もう一方がその変更に対応できます)。, 注: オブジェクトは参照にで変数に格納されます。つまり、実際のデータのメモリの場所だけが変数に格納されます。とりわけ、これはオブジェクトを「格納」する変数が、実際に同じオブジェクト参照が代入 (「格納」) されている他の変数に影響を与えることができるということです。2つの変数が同じオブジェクトを参照している場合 (例えば、 let a = b = {aProperty: 'Yeah'};)、どちらかから変数のデータを変更すると、もう一方の変数に影響を与えます。, 注: オブジェクトは参照によって変数に格納されているので、関数の実行を停止した後も、関数からオブジェクトを返す (データを失わないようにメモリに保存しておく) ことができます。, IE9 より前の Internet Explorer では、標準の addEventListener ではなく、 attachEvent() を使わなければなりません。 IE に対応するためには、上記の例を以下のように修正しなけれなりません。, attachEvent() の欠点が 1 つあります。 this の値がイベントを起こした要素ではなく、 window オブジェクトへの参照になってしまうことです。, attachEvent() メソッドは、ウェブページの特定の要素がサイズ変更されたことを検出するために onresize イベントを対応付けることができました。独自の mselementresize イベントは、イベントハンドラーを登録する addEventListener メソッドによって対応付けられた場合。 onresize と同様の機能を提供し、特定の HTML 要素の寸法が変更されたときに発行されます。, 次のコードをスクリプトの初めに書いておくと、 Internet Explorer 8 では対応していない addEventListener(), removeEventListener(), Event.preventDefault(), Event.stopPropagation() が動作するようになります。このコードは、 handleEvent() と DOMContentLoaded イベントにも対応します。, 注: useCapture に対応していないため、 IE 8 では代わりの方法はありません。以下のコードは IE 8 への対応を追加するだけです。また、 IE 8 用の代替モジュールは、標準モードのみで動作します。 doctype 宣言が必要です。, addEventListener() は、DOM 2 Events 仕様で導入されました。それ以前は、以下のようにイベントリスナーを登録していました。, このメソッドは、要素上に click イベントリスナーが既に存在する場合、置き換えてしまいます。 他のイベント、blur (onblur)、keypress (onkeypress)、などのような関連するイベントハンドラも同様です。, これは本質的に DOM 0 の一部であるため、イベントリスナーを追加するためのこのテクニックは非常に広く対応されており、特別なブラウザー間の互換コードを必要としません。これは、 (IE 8 以前のような) 非常に古いブラウザーに対応しなければならない場合に、イベントリスナーを動的に登録するために使用されます。 addEventListener のブラウザー対応の詳細については、下記の表を参照してください。, 上記の最初のケースでは、ループが繰り返されるたびに新しい (無名の) ハンドラー関数が作成されます。 2 番目のケースでは、以前に宣言された同じ関数がイベントハンドラーとして使用され、作成されるハンドラー関数が 1 つしかないため、メモリ消費量が少なくなります。さらに、最初のケースでは、無名関数への参照が保持されないため (ここでは、ループが作成する可能性のある複数の無名関数のいずれも保持されないため)、 removeEventListener() を呼び出すことができません。2つ目のケースでは、 processEvent が関数への参照なので、 myElement.removeEventListener("click", processEvent, false) を実行することが可能です。, 実際には、メモリ消費に関しては、関数への参照が保持されていないことが本当の問題ではなく、静的な関数への参照が保持されていないことが問題なのです。以下の問題ケースでは、どちらも関数への参照は保持されていますが、繰り返しのたびに再定義されているため、静的なものではありません。 3 つ目のケースでは、無名関数の参照が反復のたびに再割り当てされています。 4 番目のケースでは、関数の定義全体は不変ですが、 (コンパイラによって[[昇格]]されていない限り) 新しいものとして繰り返し定義されているので、静的ではありません。したがって、単純に[[複数の同一のイベントリスナー]]のように見えますが、どちらの場合も、各反復処理では、ハンドラー関数への独自の参照を持つ新しいリスナーが作成されます。しかし、関数の定義自体は変更されないので、重複するリスナーごとに同じ関数が呼び出される可能性があります (特にコードが最適化されている場合)。, また、どちらの場合も、関数への参照は保持されていたが、追加するごとに繰り返し再定義されていたので、上からの remove 文でリスナーを削除することができますが、最後に追加されたものだけが削除されるようになります。, 仕様書によれば、 passive オプションの既定値は常に false です。しかし、これは特定のタッチイベントを扱うイベントリスナーが (特に) スクロールを処理しようとしている間にブラウザーのメインスレッドをブロックする可能性をもたらしており、スクロール処理中の性能が大幅に低下する結果になる可能性があります。, この問題を防ぐために、一部のブラウザー (特に Chrome と Firefox) では、文書レベルノードである Window, Document, Document.body の touchstart および touchmove イベントの passive オプションの既定値を true に変更しています。これにより、イベントリスナーが呼び出されなくなるため、ユーザーがスクロールしている間にページのレンダリングをブロックすることができなくなります。, Note: この変更された動作を実装しているブラウザー (およびそれらのブラウザーのバージョン) を知りたい場合は、下記の互換性一覧表を参照してください。, この動作は下記のように、明示的に passive の値を false に設定することで上書きできます。, addEventListener() の options 引数に対応していない古いブラウザーでは、これを使用しようとすると、機能検出を適切に使用せずに useCapture 引数の使用を防ぐことがあります。, 基本的な scroll イベントの passive の値を気にする必要はありません。キャンセルできないので、イベントリスナーはどのような場合でもページのレンダリングをブロックすることはできません。.
Qiita can be used more conveniently after logging in. pbjs.setConfig({bidderTimeout:2000}); googletag.defineSlot('/21812778492/blog_468x60_common_eyecatch02_adsence', [728, 90], 'div-gpt-ad-1567575393317-0').addService(googletag.pubads());
© 2005-2020 Mozilla and individual contributors.
Qiita can be used more conveniently after logging in. 転職を考えるならQiita Jobs！今ならお祝い金30万円プレゼントキャンペーン実施中！, you can read useful information later efficiently. googletag.defineSlot('/21812778492/blog_300x250_common_sidemiddle02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198822157-0').addService(googletag.pubads());
change：コントロールの値が変化した後に発火 blur：コントロールがフォーカスを失ったときに発火, load：読み込みが完了したときに発火 見栄えが悪いので、addEventListenerの第二引数はオブジェクトとして切り出して定義した方がいいかもしれませんね。 まとめ あまり掘り下げられておりませんが、一旦備忘録として残しておきます。 認識が誤っている箇所などございましたら、ご指摘頂けますと助かります。 googletag.defineSlot('/21812778492/blog_300x250_common_ctc02_adsence', [300, 250], 'div-gpt-ad-1566564559478-0').addService(googletag.pubads());
侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。, 「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。, フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
googletag.defineSlot('/21812778492/blog_300x250_common_fixed01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565194485392-0').addService(googletag.pubads()); keyup：キーを離したときに発火, DOMFocusIn：ターゲットがフォーカスを受け取ったとき発火
reset：resetボタンが押されたときに発火