最終更新:2020-06-05 (金) 02:40:13 (1415d)  

EventTarget.addEventListener
Top / EventTarget.addEventListener

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

構文 

  • target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener [, useCapture]);
target.addEventListener(type, listener [, useCapture, aWantsUntrusted  ]); // Gecko/Mozilla のみ
↑

パラメータ

  • type対象とするイベントの種類を表す文字列
    listener指定されたタイプのイベントが発生するときに通知を受け取るオブジェクト。これは、EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の関数でなければなりません。
    options (Optional)対象のイベントリスナーの特性を指定する、オプションのオブジェクトです
    useCapture (Optiona)キャプチャフェーズ?を使用する場合は、 useCapture に true を指定します。(デフォルトはfalse)
↑

bind

  • JavaScript 1.8.5でFunction.prototype.bind() メソッドが導入されました。これは呼び出す関数内で this に相当する値を指定できるものです。これを使えば、関数がどこから呼び出されるかによって this の値が変わってしまうというややこしい問題を簡単に回避できます。 
    var Something = function(element) {
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // this は element なので undefined になります
  };
  this.onclick2 = function(event) {
    console.log(this.name); // this はバインドされた Something オブジェクトなので「Something Good」と出力されます
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // これが仕掛けです
}
↑

JavaScript/イベントオブジェクト

  • addEventListenerで登録したイベントリスナの第一引数（最初の引数）に、イベントオブジェクトが自動的に渡されます。
target.addEventListener(type, listener, useCapture);
↑

JavaScript/this

  • Function.prototype.bind
  • これを使えば、関数がどこから呼び出されるかによって this の値が変わってしまうというややこしい問題を簡単に回避できます
↑

関連




検索：