前作った仕組みだと無名関数の特定ができていないので修正しました。



よく見れば、前回作ったときの

```js
var id = "f_" + type + "_" + callback;
```

これでは異なる要素の同じイベントハンドラを区別できないです。

というわけで、addListenerの時に要素・イベントタイプ・コールバック・コールバック呼出元と、これらから作成した無名関数もまとめてスタックしておき、removeListenerの時に要素・イベントタイプ・コールバック・コールバック呼出元が全て一致したとき、スタックから取り出した無名関数を返すことにした。

removeListenerの時に同じ素材で新たに無名関数を作っても、比較したときに異なるオブジェクトとみなされてしまうので、最初に作成した変数を参照で（のFunctionは参照渡しらしい）呼び出す。この辺、前回時は理解できてなかった。

コールバックに無名関数を使いたい時もあるので、callbackが関数型の場合はスタックに積まずにリスナー登録のみ。これをremoveするには無名関数内でarguements.callee。

```js
EventHandler = {
  addListener: function(element, type, callback, context) {
    var func;
    if (typeof(callback) == "function") {
      func = callback;
    } else if(typeof(callback) == "string") {
      func = function(e){ context[callback](e); };
      EventHandler.Stack.addStack(element, type, callback, context, func);
    } else {
      return;
    }
    if(element.addEventListener) element.addEventListener(type, func, false);
    else if(element.attachEvent) element.attachEvent("on"+type, func);
  },
  removeListener: function(element, type, callback, context) {
    if (!typeof(callback) == "string") return;
    var num = EventHandler.Stack.findStack(element, type, callback, context);
    var func = EventHandler.Stack.getStack(num).func;
    EventHandler.Stack.removeStack(num);

    if (func == null) return;
    if(element.removeEventListener) element.removeEventListener(type, func, false);
    else if(element.detachEvent) element.detachEvent("on" + type, func);
  }
}
```

こちらはスタックを保持するためのオブジェクト

```js
EventHandler.Stack = {
  _count: 0,
  _list: [],
  addStack: function(element, type, callback, context, func) {
    var obj = {
      id: EventHandler.Stack.getUID(),
      element: element,
      type: type,
      callback: callback,
      context: context,
      func: func
    };
    EventHandler.Stack._list.push(obj);
  },
  removeStack: function(num) {
    EventHandler.Stack._list.splice(num, 1);
  },
  getStack: function(num) {
    return EventHandler.Stack._list[num];
  },
  findStack: function(e, t, cb, ct) {
    for (var i = 0; i < EventHandler.Stack._list.length; i++) {
      var s = EventHandler.Stack._list[i];
      if (s.element == e && s.type == t && s.callback == cb && s.context == ct) {
          return i;
      }
    }
    return null;
  },
  getUID: function() {
      return EventHandler.Stack._count++;
  }
}
```

いちお、これでFF、Safari、IEで動いているけど、どうなんでしょう。僕的にはとても便利です。

JavaScriptでスコープを維持しつつイベントハンドリングできるしくみ(2)

いつのまにか半年も経っていた・・・
ちょっと実験サイトを作りました。

<a href="http://www.curoko.net/">http://www.curoko.net/</a>



ついったーAPI、flickr API、lastfmのフィードを使ってインスタントに更新できるサイト。これだけじゃなんとなく寂しい気もするけど。

ついったAPIはクエリを投げるscriptタグをappendするとJSON形式のデータが返ってくるのでそれを受け取るコールバックを書けば終わり。

lastfmはRSSをgoogle feed API経由で取得するんですが、なぜか10件中4件しか拾えない。なんだろう。

flickr APIは読込み完了までローディングをつけるのと、ソート順の変更機能を付けてみた。view数でのソートがしたいけど、もともとの機能にはないらしい。

あと、select要素の置換え。option要素を走査して、代理のulリストを作成して同様の機能を持たせ、結果をselectにフィードバックする、ということをしています。結構、ゴリ押しです・・
CSS3のプロパティを使うと角丸＋ドロップシャドウで簡単にmacっぽいインターフェースにできる。IEさえなければ相当作業量減らせるのに。

細かい所でいろんな発見があったので、追々記事にしたいと思います。

Archive for 2010.01

JavaScriptでスコープを維持しつつイベントハンドリングできるしくみ(2)

久しぶりにJavaScriptでいろいろやってみた