サンプルコードには何度も書いているはずなんだけどな。
node.addEventListener ('click', function (event) { kansuu (event, 1, 2); }, false);
ただし、イベントリスナを無名関数にすると後で removeEventListener できなくなるので、慎重を期すなら、
var listener = function (event) { kansuu (event, 1, 2); };
node.addEventListener ('click', listener, false);
...
node.removeEventListener ('click', listener, false);
のように関数への参照を保持しておいた方が良いかもしれない。
以下余談。
DOM-Events の仕様を見ると、イベントリスナは EventListener インタフェースを持つオブジェクトとある。ECMAScript 上では、普通の Function が EventListener オブジェクトとして扱われる。
だが、Firefox、Opera では、イベントリスナとして EventListener を模した Object を渡すことができる。
var listener = {
handleEvent : function (event) { ; }, // イベントハンドラ
... // 以下、自由にユーザ定義メソッド、プロパティを追加
};
node.addEventListener ('click', listener, false);
イベント発生時には、リスナの handleEvent メソッドに event オブジェクトが渡される。ここで重要なのは、handleEvent 実行時の this 値がリスナ登録ノードではなく、リスナオブジェクトであること。これで、イベント関連のデータをまとめておけるし、何より this 値を保存するのにクロージャを使って云々、といった作業から解放される。
多くの実装は後方互換性のため、ハンドラ内の this 値がリスナの登録ノードを指す。しかし、DOM-Events にそのような規定はないし、そもそもリスナの登録ノードは event.currentTarget で参照できるのだから、this まで同じものを指す必要はない。次バージョンの Safari でも、イベントリスナとして Object を渡せるようになる。
http://nanto.asablo.jp/blog/2007/03/23/1339502#domspecvsbrowser-EventListener-impl
IE では、attachEvent に渡したハンドラ内では this 値が null という、ちょっとありえない事態になる。
node.attachEvent ('onclick', functioin (e) { this; /*null*/ } );
そこで、以下のように考えてみた。
var handler = function (event) {
return arguments.callee.listener.handleEvent (event);
};
handller.listener = {
handleEvent : function (event) { ; },
...
};
node.attachEvent ('onclick', handler);
arguments.callee を使うので IE5.5 以上になるが、こうすれば、ハンドラ内の this 値が listener オブジェクトを指す。
要するに、関数のプロパティとして必要なデータを貼り付けておけば、関数内では arguments.callee を通してそのデータを参照できるので、引数にこだわる必要もないのでは、というお話。
