addEventListener() メソッド
EventTarget.addEventListener()
addEventListener() メソッドは、マウスクリックやキーボードからの入力といったイベントを監視状態に設定するためのメソッドです。Window、Document、各エレメントにイベントハンドラーを設定します。
イベントハンドラーとは、onイベント名の属性です。 例えば、Window.onload=function( ){...} における .onload=function( ){...} の部分です。
設定されたイベントに該当する操作や動きがあるとその関数や関数式が実行されます。
var elem_ = document.getElementById('example'); elem_.addEventListener('load',()=>{ alert(this); },false);
addEventListener() メソッドの第1引数は、Event タイプ、第2引数に呼び出す関数やアロー関数を、第3引数はイベントの伝搬(バブリング)の指定で Boolean 型です。
第3引数はイベントの伝搬(バブリング)を指定されたエレメントで止めるか/否かの指定で、event.stopPropagation() 関数を併用する方法があります。
イベントリスナーからの削除
addEventListener() メソッドによるイベントハンドラーの登録は、「イベントリスナーへの登録」という言われ方をしています。.onload=function( ){...} といったイベントハンドラーとは別の扱いをされるためのようです。
設定したイベントリスナーを削除するにはremoveEventListener() メソッドを使います。
addEventListener()、removeEventListener()メソッドの使い方は少々難しいです。
イベントハンドラーの登録と削除のほうが簡易です。例えば、.onload = function( ){...} と .onload = null といった組み合わせです。
イベントの実行
イベントハンドラーをdispatchEvent()メソッドで任意に実行することもできます。
直接関数を呼び出す
直接に関数を呼び出す場合は関数名のみを指定します。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タグエレメントなどがロード済みでなければなりません。
イベントによって関数や式が実行されたときに、バブリングで思わぬ動きがあることにも注意が必要です。
バブル機能によって関連するエレメントで同じイベントがあればそのエレメントのイベントハンドラーも実行します。
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にすればイベントハンドラーのためのメモリが無駄にならないです。
デフォルトではpreventDefault()メソッドといったイベントの中止があるかないかを常に監視しています。
passiveプロパティは、その監視をしないか否かを指定します。falseで監視し、trueで監視しません。
trueに設定するとpreventDefault()メソッドといった割り込み処理が使えなくなります。
captureプロパティは、バブリングかキャプチャーかの指定です。キャプチャーとはバブリングの逆に階層を降りてくる処理です。 trueに設定すると直下のエレメントにイベントを通知します。直下の階層エレメントで該当するイベントハンドラーが設定してあれば、それが実行されます。