Pebble Coding

ソフトウェアエンジニアによるIT技術、数学の備忘録

JavaScript addEventListener(),removeEventListener()

addEventListener(),removeEventListener()というのはWindowオブジェクト、Documentオブジェクト、Elementオブジェクトに存在するメソッド。(他にもある)
引数の数と型は以下の通り。

addEventListener( 'hoge', f, false );
removeEventListener( 'hoge', f, false );

第1引数はイベント名を文字列で指定する。
第2引数は関数名を指定する。その場で関数定義を書いてもよい。
JavaScriptにおいては関数の引数の数があっていなくても問題はないので、引数を使う必要がない場合は通常省略する。
第3引数はfalse固定と覚えてしまってよい。

イベントはJavaScriptの仕様ではなく、DOMの仕様なので、このメソッドを使ったJavaScriptサンプルはSpikerMonkey上では作れない。
SafariでのDOMの仕様はAppleSafari Web Content Guideを見ればよいのだが、DOM Level 2に準拠とあるので、(ちなみにJavaScriptECMAScript 3に準拠と書いてある)、
Document Object Model Events
仕様書ということになるが、Mozillaのサイト
Event reference | MDN)
の方が見やすく便利である。

項目ごとにChrome,FireFox,IE,Opera,Safariでサポートされているかどうかも書かれており、素晴らしい。
例えば、MouseEventはUIEventから継承されたもので、UIEventはEventから継承されたものと書いてある。
Eventを詳しく見ていくと、
プロパティとして、
bubbles
cancelable
currentTarget
defaultPrevented
detail
eventPhase
explicitOriginalTarget
isTrusted
originalTarget
target
timeStamp
type
メソッドとして、
createEvent()
initEvent()
preventDefault()
stopImmediatePropagation()
stopPropagation()
がある。

実際使うのはこれらのうちのわずかである。
target : イベントをdispatch(送出)したオブジェクトへのリファレンス
type : イベントタイプを含む文字列(Mozillaの場合、"abort", "change", "click", "DOMNodeInserted", "dragstart", ...)