素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

handleEvent、addEventListener

addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。

window.addEventListener("click", {
  handleEvent: function (e) {
    console.log(e);
  }
}, false);

また、この仕様を利用すると、

({
  run: function () {
    window.addEventListener("click", this, false);
    this.counter = 0;
  },
  handleEvent: function () {
    this.counter++
    if (this.counter < 3)
      alert(this.counter + "clicked!");
    else
      this.destroy();
  },
  destroy: function () {
    window.removeEventListener("click", this, false);
  }
}).run();

と書けて、(function(){ function onclick() {} /*...*/ })();とするよりきれいで便利。
Document Object Model Events
element.addEventListener - MDN