【学】jQuery的源码思路3——添加事件及其他

这段添加的方法有:

• 各类事件函数
• css()
• addEvent()
• toggle()

//添加各种事件，将常用的事件名称放入数组，然后循环着加入到zQuery对象的原型上
var eventArr = ['click','mouseover','mouseout','mousemove','contextmenu','mouseenter','mouseleave'];
for(var i=0; i<eventArr.length; i++){ //因为循环里套了一层函数，所以用函数自执行，把每次循环的i传入
    (function(index){
        zQuery.prototype[eventArr[i]] = function(fn){
            for(var i=0; i<this.elements.length; i++){
                addEvent(this.elements[i],eventArr[index],fn);
            }
        };
    })(i);
}

//样式设置css();因为是方法，写在原型上
zQuery.prototype.css = function(arg1,arg2){
    if(arguments.length == 2){
        for(var i=0; i<this.elements.length; i++){
            this.elements[i].style[arg1] = arg2;
        }
    }else{
        if(typeof arg1 == 'string'){
            return getStyle(this.elements[0],arg1);//根据jQuery，返回样式都是返回集合中的第0个元素，如果获取不到就获取第二个，这里就默认能够获取到第0个
        }else if(typeof arg1 == 'object'){//参数也可以是个json，批量设置值
            for(var i=0; i<this.elements.length; i++){
                for(var key in arg1){
                    this.elements[i].style[key] = arg1[key];
                }
            }
        }
    }
}

function addEvent(obj,sEvt,fn){
    if(obj.addEventListener){
        obj.addEventListener(sEvt,function(ev){
            if(fn.call(obj,ev) == false){ //注意这里的this指向以及ev的传递，这句话不但执行了函数，还对函数执行后的返回值进行了判断，看看是不是fn里有return false，按照jQ的写法，return false是既阻止默认事件又取消冒泡的
                ev.stopPropagation();
                ev.preventDefault();
            }
        },false);
    }else{
        obj.attachEvent('on' + sEvt,function(){
            if(fn.call(obj,event) == false){
                event.cancelBubble = true;
                event.returnValue = false;
            }
        });
    }
}

//toggle，toggle函数是在函数里传若干个参数，每个参数都是函数，调用的时候一次调用
zQuery.prototype.toggle = function(){
    var args = arguments; //先把参数集合存进来
    for(var i=0; i<this.elements.length; i++){
        this.elements[i].count = 0;//给每个点击的元素身上绑定一个属性count，这里的this是oo对象，
        addEvent(this.elements[i],'click',function(ev){
            if(args[this.count % args.length].call(this,ev)==false){
/*
1) 如果这里不用call，则this指代的是arguments这个对象，就这个对象调用了函数，但是为了让this指向被点击的元素，所以要call里传一下this，这里的this，应该是被点击的对象this.elements中的每一个。记住，在事件绑定函数中，this就是指代被绑定的那个元素
2) count也是每个元素身上自带的
3) 这句代码，一方面执行了函数，而且还对函数的返回值进行了判断
4）this.elements本身是对象oo中的一个属性，
*/
                ev.cancelBubble = true;
            }
            this.count++;
        });
    }
};