DOMおれおれAdvent Calendar 2015 – 18日目分

2015-12-18

jQueryだと on() で楽ちんなんだけど、DOMでは addEventListener() になります。な、長い！

var el = document.querySelector('#the-button');
el.addEventListener('click', function(event) {
  alert('Hello world!');
});

第三引数

ふつうは addEventListener(type, listener) という形で使うけれど、実は addEventListener(type, listener, useCapture) のように三つめの引数 useCapture を取る事ができます。

昔は必須だったけど今は省略可能で、省略時は false となります。

で、MDNを見るとこんな註釈が挿入されてます。（英語版にも同様の註釈あり。）

注記: useCapture は、主要なブラウザの最近のバージョンでのみ省略可能です。例えば、Firefox 6 より前では省略できません。幅広い互換性を保つために、引数を省略すべきではありません。

Firefox 6のリリースは2011年。IE と違って何年も前のものを使い続ける事はないだろうし、省略しちゃっても全然構わないと思います。

用途の説明は省きます。使わんし。

bind() の併用

addEventListener() で登録した関数は、実行時は対象の要素オブジェクトを this として呼ばれます。MVxのViewとかに分けて作ってるとそういうの困るので、 bind() して使う事が多いかと思います。

var view = {
  el: null,

  initialize: function(options) {
    this.el = options.el;
    this.name = options.name;

    this.el.addEventListener('click', this.onclick.bind(this));
  },

  onclick: function(event) {
    alert(this.name);  // => "Orange"
  }
};

view.initialize({
  el: document.querySelector('button'),
  name: 'Orange'
});

環境

IE 9+。他は問題なし。

IE 8までは attachEvent() という別のメソッドで同様の結果を得られます。ほとんど一緒だけど、イベント名の前に "on" を追加する必要があります。（例: "click" → "onclick" ）　あとはコールバック関数に与えられる引数の内容がちょっと違うとか。

参考