cntomxu
commented
9 years ago bind unbind的思路
■ 追加一个$events对象 var $events = { //events: [], G_INDEX: 0, _create: function(el, args, eventType, orgFunc) { // set function's gindex if(orgFunc._gindex == undefined) orgFunc._gindex = ++this.G_INDEX;
var evt = {
_gindex: orgFunc._gindex, target: el, args: args, eventType: eventType,
orgFunc: orgFunc,
func: function(e) {
this._gindex = orgFunc._gindex;
return orgFunc.apply(el, [e].concat(args));
}
};
el._events = el._events || [];
el._events.push(evt);
return evt.func;
},
_remove_listener: function(el, eventType, func) {
if(eventType=="click"&&$browser.device=="smartphone")eventType="touchstart";
eventType = eventType.replace(/^on/,'');
if (el.removeEventListener) /* W3C */
el.removeEventListener(eventType, func);
else if (el.detachEvent) { /* IE */
el.detachEvent("on"+eventType, func);
}else {
delete el["on"+eventType];
}
},
_fix_event_type: function(el, eventType) {
if(eventType=="click"&&$browser.device=="smartphone")eventType="touchstart";
eventType = eventType.replace(/^on/,'');
if (el.addEventListener) /* W3C */
return eventType;
else if (el.attachEvent) { /* IE */
return "on"+eventType;
}else {
return "on"+eventType;
}
},
bind: function(el, arg1, arg2) {
if(!$.isElement(el)) return;
if(arg2 && typeof(arg2)!="function") {
if(console)console.error("$events.bind() don't use string, only use function.");
return;
}
var _this = this;
var args = Array.prototype.slice.call(arguments);
args = args.slice(3);
if(typeof(arg1)=="string"){
if(arg1=="click"&&$browser.device=="smartphone")arg1="touchstart";
if(arg2){
arg1 = arg1.replace(/^on/,'');
if (el.addEventListener) /* W3C */
el.addEventListener(arg1, this._create(el, args, arg1, arg2) ,false);
else if (el.attachEvent) { /* IE */
el.attachEvent("on"+arg1, this._create(el, args, arg1, arg2));
}else {
el["on"+arg1] = this._create(el, args, arg1, arg2);
}
}
}else if(typeof(arg1)=="object" && !arg2){
for(var f in arg1){
f = f.replace(/^on/,'');
if (el.addEventListener) /* W3C */
el.addEventListener(f, this._create(el, args, arg1, arg1[f]), false);
else if (el.attachEvent) { /* IE */
el.attachEvent("on"+f, this._create(el, args, arg1, arg1[f]) );
}else {
el["on"+f] = this._create(el, args, arg1, arg1[f]);
}
}
}
},
unbind: function(el, eventType, func) {
if(!$.isElement(el)) return;
eventType = this._fix_event_type(el, eventType);
el._events = el._events || [];
if(eventType) {
if(func){
var _gindex = func._gindex;
if(_gindex) {
el._events = el._events || [];
for(var i= el._events.length -1; i>=0; i--) {
var evt = el._events[i];
if(evt.eventType == eventType && evt._gindex == _gindex) {
this._remove_listener(el, evt.eventType, evt.func);
el._events.splice(i,1);
}
}
}
} else { // remove all event by eventName
for(var i= el._events.length -1; i>=0; i--) {
var evt = el._events[i];
if(evt.eventType == eventType) {
this._remove_listener(el, evt.eventType, evt.func);
el._events.splice(i,1);
}
}
}
} else { // remove all event
for(var i= el._events.length -1; i>=0; i--) {
var evt = el._events[i];
this._remove_listener(el, evt.eventType, evt.func);
el._events.splice(i,1);
}
}
}};
■ 然后扩展Element方法 bind2 : function(arg1, arg2){ var args = Array.prototype.slice.call(arguments); args = args.slice(2); $events.bind.apply($events, [this, arg1, arg2].concat(args)); return this; }, unbind2: function(eventType, func) { $events.unbind(this, eventType, func); return this; },
■ 给Element追加了两个方法,调用的是$events的方法
- bind2 使用象下面这样 thisElement.bind2("click", function(event, a, b, c){ // 这里的this是 绑定的 thisElement对象， event和以前一样 // a="aaa" // b="bbb" // c="ccc" }, "aaa", "bbb","ccc");
- unbind2 // 删除所有bind2绑定的事件 thisElement.unbind2(); // 删除所有bind2绑定的click事件 thisElement.unbind2("click"); // 删除bind2绑定的单一click事件，需要指定的function, 注意这个fuction在 bind2() 时不能使用匿名函数 thisElement.unbind2('click', funcXXXXX);
soyoes
var $events = { //events: [], G_INDEX: 0, _create: function(el, args, eventType, orgFunc) { // set function's gindex if(orgFunc._gindex == undefined) orgFunc._gindex = ++this.G_INDEX;
};