蓝色幻想728

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

这段添加的方法有:

  • 各类事件函数
  • 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++;
        });
    }
};
posted on 2016-08-19 09:07  蓝色幻想728  阅读(145)  评论(0编辑  收藏  举报