マニュアル: Document Object Model(DOM)

投稿日: 更新日: Webブラウザ JavaScript

どこを参照する?

以前はDOMと言えばW3Cだったのですが、今はMDNでいいと思います。

イベントの種類

event.type - Web API インターフェイス | MDN

よく使うAPI

addEventListenerに引数を渡す方法

以下の2つの方法があります。

  1. 関数ではなくEventListenerを実装したオブジェクトを渡す
  2. bindを使用する

EventListenerを実装したオブジェクトを渡す

結論から言うと、以下のようにすれば可能です。

target.addEventListener('click', {
    handleEvent: function(event) {
        // イベントハンドラの実装
        console.log(this.name);
    },

    // 引数
    name: 'button',
    count: 100
});

理由を説明すると、まず、 addEventListenerは以下のような形式で呼び出されることが多いです。

target.addEventListener('click', function(event) { ... });

しかし、この2番目の引数は、関数でなくても構いません。 addEventListenerの2番目の引数は以下のように定義されています。

EventTarget.addEventListener() - Web API インターフェイス | MDN

これは、EventListener インタフェースを実装するオブジェクト、 あるいは、単純に、JavaScript の関数でなければなりません。

前者の「EventListenerインタフェースを実装するオブジェクト」とは、 以下のような形式のオブジェクトです。 handleEventという名前で関数が登録されていればいいということです。

{
    handleEvent: function(event) {
        ...
    }
}

bindを使用する

MDNでは「bind() を使用した this の指定」という項で説明していますが、 関数オブジェクトよりは、クラスや、普通のオブジェクトの方が分かりやすい と思うので、その例を記載します。 以下のコードは動作確認していないので、もし間違ってたら修正してください。

class Foo {
  constructor(element) {
    this.handler = this.clickHandler.bind(this);
    element.addEventListener('click', this.handler);
  }

  clickHandler(event) {
    ...
  }
}

あるいは以下のように書きます。

const Foo = {
  init: function(element) {
    this.handler = this.clickHandler.bind(this);
    element.addEventListener('click', this.handler);
  }

  clickHandler: function(event) {
    ...
  }
}

ここで、this.handlerとして代入しているのは、あとで削除できるようにするためです。 MDNにある以下の記述のことです。

ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。

外部サイト

逆引きマニュアル



ページトップへ戻る