jQueryのbind、unbindみたいにnamespace使ってaddEventとかremoveEventできるやつ

jQueryのbindとunbindは超便利やなぁと思って、arguments.calleeじゃなくてもremoveEventできるようなやつ書いた。addEventListenerとremoveEventLisetenerにnamespace渡して管理できる的な。iOSで動けばいいからattachEventとdetachEventは入れてないです。

結局思いついたやり方でやって、jQueryちゃんと読んでないけど、やり方はこんな感じ?つまり絶賛勉強中。。

巡り巡ってElement.prototypeを断念、、ソース修正した。どうせならこっちの方が使いやすいかも。Elementのprototypeに差し込んだ

revision: gist: 904063

bindの使い方

一番ベーシック

普通のaddEventListenerと同じ

bind(hoge, type, func);

名前空間

名前空間使ってaddEventする(unbind用)

bind(hoge, type.namespace, func);

一括addEvent

複数のイベントを一括でaddEvent

bind(hoge, {
  "click": func,
  "dblclick": func
});

unbindの使い方

全てのイベントを解除

全部消える

unbind(hoge);

指定したtypeのイベントを解除

“click”にひもづいてるイベントが全部消える

unbind(hoge, type);

指定したtype.namespaceのイベントを解除

“click.unko”のイベントのみ消える

unbind(hoge, type.namespace);

なんかでも中途半端でところどころうまく動いてないかも。

/*
 * bind, unbind
 *
 * @author    : nori()
 * @copyright : 5509(https://5509.me/)
 * @license   : The MIT License
 * @modified  : 2011-04-06 13:00
 *
 * HOW TO USE
 * bind event          : bind(elm, type, func) or bind(elm, {})
 * bind event.name     : bind(elm, type.name, func)
 * unbind all events   : unbind(elm)
 * unbind events(type) : unbind(elm, type)
 * unbind event.name   : unbind(elm, type.name)
 */
YOURNAMESPACE.bind = function() {
  var i, _a = arguments;
  // 一括登録
  if ( typeof _a[1] === "object" ) {
    for ( i in _a[1] ) {
      bindFunc(i, _a[1][i]);
    }
  // 単体登録
  } else {
    bindFunc(_a[1], _a[2]);
  }
  function bindFunc(type, func) {
    var i;
    type = type.split(" ");
    for ( i = 0, l = type.length; i < l; i++ ) {
      // 名前空間の指定がある場合
      if ( type[i].indexOf(".") !== -1 ) {
        type[i] = type[i].split(".");
        _a[0]["bindedNamed"] = _a[0]["bindedNamed"] || {};
        _a[0]["bindedNamed"][type[i][0]] = _a[0]["bindedNamed"][type[i][0]] || {};
        _a[0]["bindedNamed"][type[i][0]][type[i][1]] = func;
        _a[0].addEventListener(type[i][0], func, false);
      // 名前空間の指定がない場合
      } else {
        _a[0]["binded"] = _a[0]["binded"] || {};
        _a[0]["binded"][type] = _a[0]["binded"][type] || [];
        _a[0]["binded"][type][_a[0]["binded"][type].length] = func;
        _a[0].addEventListener(type[i], func, false);
      }
    }
  }
}
YOURNAMESPACE.unbind = function(elm, type) {
  var i = 0, c, d, bindedTypes, bindedEvents, bindedNamedEvents;
  // typeがない場合は全削除
  if ( !type ) {
    // 名前空間無しのイベントを削除
    if ( elm["binded"] ) {
      bindedTypes = elm["binded"];
      for ( c in bindedTypes ) {
        bindedEvents = bindedTypes[c];
        while ( bindedEvents[i] ) {
          elm.removeEventListener(c, bindedEvents[i], false);
          bindedEvents.splice(i, i + 1);
        }
      }
    }
    // 名前空間有りのイベントを削除
    if ( !elm["bindedNamed"] ) return false;
    bindedNamedEvents = elm["bindedNamed"];
    for ( c in bindedNamedEvents ) {
      for ( d in bindedNamedEvents[c] ) {
        elm.removeEventListener(c, bindedNamedEvents[c][d], false);
      }
      delete bindedNamedEvents[c];
    }
  } else
  // namespaceの指定がある場合は単体削除
  if ( type.indexOf(".") !== -1 ) {
    type = type.split(".");
    elm.removeEventListener(type[0], elm["bindedNamed"][type[0]][type[1]], false);
  // typeはあるけど名前空間の指定がない場合はtypeだけ削除
  } else {
    // 名前空間無しのイベントを削除
    if ( elm["binded"] && elm["binded"][type] ) {
      bindedEvents = elm["binded"][type];
      while ( bindedEvents[i] ) {
        elm.removeEventListener(type, bindedEvents[i], false);
        bindedEvents.splice(i, i + 1);
      }
    }
    // 名前空間有りのイベントを削除
    if ( !elm["bindedNamed"] || !elm["bindedNamed"][type] ) return false;
    bindedNamedEvents = elm["bindedNamed"][type];
    for ( c in bindedNamedEvents ) {
      elm.removeEventListener(type, bindedNamedEvents[c], false);
    }
    delete bindedNamedEvents;
  }
}

何か役に立つことがあったらシェアしてみてください

このエントリーをはてなブックマークに追加

Leave a comment

Trackbacks: 0

Trackback URL for this entry
Listed below are links to weblogs that reference
jQueryのbind、unbindみたいにnamespace使ってaddEventとかremoveEventできるやつ from 5509

Author

nori
nori
- UI Engineer
Location
- ,