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; } }
Trackbacks: 0
- Trackback URL for this entry
- Listed below are links to weblogs that reference
- jQueryのbind、unbindみたいにnamespace使ってaddEventとかremoveEventできるやつ from 5509
Leave a comment