事件处理(转)
var foo = function(){ this.init.apply(this,arguments);};
foo.prototype = {
init:function(_name){
this.name = _name;
this.addEvent('click',document,this.say);
},
say:function(_ev){
alert(this.name);
this.stop();
},
stop:function(){
this.removeEvent('click',document,this.say);
},
addEvent:function(_event,_element,_fn){
if (_element.addEventListener) {
_element.addEventListener(_event, _fn, false);
} else if (_element.attachEvent) {
_element.attachEvent("on" +_event,_fn);
}
},
removeEvent:function(_event,_element,_fn){
if (_element.removeEventListener) {
_element.removeEventListener(_event, _fn, false);
} else if (_element.detachEvent) {
_element.detachEvent("on" +_event, _fn);
}
}
}
var a = new foo('llinzzi');
以上代码可以观察到this.say的alert方法已经调用,但内部的this.name已经不存在了,因为找不到this了。并且如果要像say里面传值似乎也比较麻烦。
解决this丢失和传值问题的代码,并解决传this后不能注销事件的问题。
var foo = function(){ this.init.apply(this,arguments);};
foo.prototype = {
init:function(_name){
this.name = _name;
this.addEvent('click',document,this.say,this,'hello world!');
},
say:function(_ev,_word){
alert(this.name +':' +_word);
this.stop();
},
stop:function(){
this.removeEvent('click',document,this.say);
},
addEvent:function(_event,_element,_fn,_scope,_args){
var args = this._toArray(arguments),
ev = args.shift(),
element = args.shift(),
fn = args.shift(),
scope = args.length>0?args.shift():window;
element['e'+ev+fn] = function(_ev){
_ev == _ev || window.event;
args.unshift(_ev);
fn.apply(scope,args);
};
if (element.addEventListener) {
element.addEventListener(ev, element['e'+ev+fn], false);
} else if (element.attachEvent) {
element.attachEvent("on" +ev, element['e'+ev+fn]);
}
},
removeEvent:function(_event,_element,_fn){
if (_element.removeEventListener) {
_element.removeEventListener(_event, _element['e'+_event+_fn], false);
} else if (_element.detachEvent) {
_element.detachEvent("on" +_event, _element['e'+_event+_fn]);
}
try {
delete _element['e'+_event+_fn];
}catch(_ex){
_element['e'+_event+_fn] = null;
}
},
_toArray:function(iterable){
if (!iterable) return [];
if (iterable.toArray) return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
}
}
var a = new foo('llinzzi');
foo.prototype = {
init:function(_name){
this.name = _name;
this.addEvent('click',document,this.say);
},
say:function(_ev){
alert(this.name);
this.stop();
},
stop:function(){
this.removeEvent('click',document,this.say);
},
addEvent:function(_event,_element,_fn){
if (_element.addEventListener) {
_element.addEventListener(_event, _fn, false);
} else if (_element.attachEvent) {
_element.attachEvent("on" +_event,_fn);
}
},
removeEvent:function(_event,_element,_fn){
if (_element.removeEventListener) {
_element.removeEventListener(_event, _fn, false);
} else if (_element.detachEvent) {
_element.detachEvent("on" +_event, _fn);
}
}
}
var a = new foo('llinzzi');
以上代码可以观察到this.say的alert方法已经调用,但内部的this.name已经不存在了,因为找不到this了。并且如果要像say里面传值似乎也比较麻烦。
解决this丢失和传值问题的代码,并解决传this后不能注销事件的问题。
程序代码
var foo = function(){ this.init.apply(this,arguments);};
foo.prototype = {
init:function(_name){
this.name = _name;
this.addEvent('click',document,this.say,this,'hello world!');
},
say:function(_ev,_word){
alert(this.name +':' +_word);
this.stop();
},
stop:function(){
this.removeEvent('click',document,this.say);
},
addEvent:function(_event,_element,_fn,_scope,_args){
var args = this._toArray(arguments),
ev = args.shift(),
element = args.shift(),
fn = args.shift(),
scope = args.length>0?args.shift():window;
element['e'+ev+fn] = function(_ev){
_ev == _ev || window.event;
args.unshift(_ev);
fn.apply(scope,args);
};
if (element.addEventListener) {
element.addEventListener(ev, element['e'+ev+fn], false);
} else if (element.attachEvent) {
element.attachEvent("on" +ev, element['e'+ev+fn]);
}
},
removeEvent:function(_event,_element,_fn){
if (_element.removeEventListener) {
_element.removeEventListener(_event, _element['e'+_event+_fn], false);
} else if (_element.detachEvent) {
_element.detachEvent("on" +_event, _element['e'+_event+_fn]);
}
try {
delete _element['e'+_event+_fn];
}catch(_ex){
_element['e'+_event+_fn] = null;
}
},
_toArray:function(iterable){
if (!iterable) return [];
if (iterable.toArray) return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
}
}
var a = new foo('llinzzi');