2008年10月31日金曜日

 

【Javascript】イベントハンドラ

onclickとかをタグに書くよりソースがすっきりする。Ajax時代の主流。
以前、JS入門から派生して議論になってたけど。タグに直接書く方が簡単でイベントが指定されてるのが分かり易いのはある。

/* イベントリスナー */
var obj = document.getElementById('element');
if(window.addEventListener){
/* Firefox 用 */
  obj.addEventListener("click", myfunc, false);
}else{
/* IE 用 */
  obj.attachEvent("onclick", myfunc);
}

で、addEventListener()の第3引数useCaptureってのがある。IEには関係ない。
イベント処理の順番が変わるみたいで詳しくは以下リンク参照。サンプルスクリプトもあるので試してみたら良いと思う。

JavaScript addEventListener() - とみぞーノート
addEventListenerのuseCapture true/false時の動作比較

関数化したしたのが以下。リンク先には三項演算で記述したコードとかもある。

[JavaScript]addEventListenerを手軽に使おう - 文系大学的IT系の悲哀
function observe(target, type, listener) {
  if (target.addEventListener) target.addEventListener(type, listener, false);
  else target.attachEvent('on' + type, function() { listener.call(target, window.event); });
}
addEventListenerで渡した無名関数の中でremoveEventListenerする - 今日覚えたこと

無名関数はarguments.calleeで行う。

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google