どこを参照する?
以前はDOMと言えばW3Cだったのですが、今はMDNでいいと思います。
- W3Cの立場が怪しくなっている
- Apple以外の主要ベンダーが参加している1
- 日本語訳も提供されている
イベントの種類
event.type - Web API インターフェイス | MDN
よく使うAPI
- Node
- insertBefore
- insertAfter相当の記法も記載あり
- insertBefore
- Element
addEventListenerに引数を渡す方法
以下の2つの方法があります。
- 関数ではなくEventListenerを実装したオブジェクトを渡す
- 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にある以下の記述のことです。
ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。