javascript面向对象编程（二）（事件处理）（转载）

 

如果采用上篇文章的方法构建的类，如果要处理事件按通常的写法会造成回调函数作用域丢失。 
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');

 

下一次会分享一下在用面向对象编程过程中的一些心得，有关设计模式的一些整理。

三的内容http://www.cnblogs.com/iloveu/archive/2009/02/24/1397582.html