addEventListener() メソッド

EventTarget.addEventListener()

　addEventListener() メソッドは、マウスクリックやキーボードからの入力といったイベントを監視状態にするためのメソッドです。イベントが発生すると設定された計算式や関数の呼び出しが実行されます。
　addEventListener() メソッドによるイベントの監視はイベントリスナーといいます。
　このイベントリスナーではバブリングやキャプチャーでの操作を行うことができます。また、同じイベントで複数のリスナーを定義することができます。

addEventListener()メソッド

var elem_ = document.getElementById('example');
elem_.addEventListener('load',()=>{
	alert(this);
},false);

詳しくは Example を参照してください

　addEventListener() メソッドの第１引数は、Event タイプ、第２引数に呼び出す関数やアロー関数を、第３引数はイベントの伝搬（バブリング）の指定で Boolean 型です。

　第３引数はイベントの伝搬（バブリング）を指定されたエレメントで止めるか／否かの指定で、event.stopPropagation() 関数を併用する方法があります。

　同じような機能にイベントハンドラーがあります。on とイベント名による属性です。例えば、Window.onload=function( ){...} における .onload=function( ){...} の部分です。
　どちらも該当するイベントが発生すると設定された計算式や関数の呼び出しが実行されます。

addEventListener() メソッドについて

　addEventListener() メソッドによるイベントリスナーの機能にはイベントハンドラーと異なる部分があります。
　このメソッドから引数のある関数を呼び出すことができません。またイベントによるバブリングの操作やイベントを捉える機能自体の操作が行えます。

直接関数を呼び出す

　直接に関数を呼び出す場合は関数名のみを指定します。event は受け取ることができますが、引数は記述できません。

関数を直接呼び出す

// 直接呼び出す場合の関数は event 以外の引数がないという前提で定義する必要があります。
example_Function( event ){
	...
}

var elem_ = document.getElementById('example');
elem_.addEventListener('load',example_Function});

　引数が必要なら、function 内から関数を呼び出す方法もあります。

関数の呼び出し

var elem_ = document.getElementById('example');
elem_.addEventListener('load',()=>{
	other_Function(a,b,c);
});

イベントを呼び出すタイミングの注意

　EventTargetインターフェイスを継承するWindow、Document、Element、HTMLタグエレメントなどで使用することができます。

　注意点としては、addEventListener()メソッドでイベントハンドラーを設定するには、対象のWindow、Document、Element、HTMLタグエレメントなどがロード済みでなければなりません。
　イベントによって関数や式が実行されたときに、バブリングで思わぬ動きがあることにも注意が必要です。バブル機能によって関連するエレメントで同じイベントがあればそのエレメントのイベントハンドラーも実行します。

　イベントのバブリングにはキャプチャーというバブリングを逆に辿る機能があります。addEventListener() メソッドのオプション capture によってバブリングを操作することができます。

イベントリスナーの削除

　addEventListener() メソッドによるイベントの監視設定は、「イベントリスナーへの登録」という言われ方をしています。.onload=function( ){...} といったイベントハンドラーとは別の扱いをされるためのようです。

　設定したイベントリスナーを削除するにはremoveEventListener() メソッドを使います。
　addEventListener()、removeEventListener()メソッドの使い方は少々難しいです。
　イベントハンドラーによる登録と削除のほうが簡易です。例えば、.onload = function( ){...} と .onload = null といった組み合わせです。

イベントの実行

　イベントハンドラーをdispatchEvent()メソッドで任意に実行することもできます。

　デフォルトではイベントの中止があるかないかを常に監視しています。メソッドのオプションを passive = true にすると監視をしません。

　addEventListener() のオプションの once = true にすると一度だけイベントを捉えるとメモリを開放してイベントを監視しないということもできます。

Syntax

in JavaScript

返り値はないです。

EventTarget.addEventListener(type, callback [, options]);

　EventTargetには、EventTargetを継承するWindow、Document、Element、HTMLタグエレメントなどを設定することができます。

引数（Parameter Values）

Value	摘要
type	Event タイプ
callback	イベントによって呼び出す関数。function関数またはアロー関数
options	省略可。once、passive、capture。詳しくはoptionを付加した例を参照

返り値（Return Values）

なし

Example

　このExampleでは、アロー関数を直接記述、従来の関数の呼び出し、引数がある関数の呼び出し、optionを付加した方法を紹介します。

　以下の例は、アロー関数を直接記述した方法です。

関数による書き方

　ここでは上記のようなアロー関数ではなく、従来からある関数で記述します。関数が実行された場合のオブジェクトがアロー関数と変わります。

引数がある場合の書き方

　引数がある場合は、イベントリスナーに設定する関数の中に呼び出す関数を書きます。

optionを付加した例

　addEventListener()メソッドのoptionを付加した例です。

　onceプロパティは、イベントハンドラーを1度だけ実行するか否かを指定します。trueに指定するとイベントが一度実行されると、そのハンドラーが開放されます。
　window.onload()のようなイベントは一度しか使いません。そのような場合はonceをtrueにすればイベントハンドラーのためのメモリが無駄にならないです。

　イベントリスナーは、デフォルトでイベントの中止があるかないかを常に監視しています。 passiveプロパティは、その監視をしないか否かを指定します。falseで監視し、trueで監視しません。
　trueに設定するとpreventDefault()メソッドといった割り込み処理が使えなくなります。

　captureプロパティは、バブリングかキャプチャーかの指定です。キャプチャーとはバブリングの逆に階層を降りてくる処理です。 trueに設定すると直下のエレメントにイベントを通知します。直下の階層エレメントで該当するイベントハンドラーが設定してあれば、それが実行されます。