JS里面几个实用的封装函数

一滚轮事件的封装函数

function MouseWheelHandle (obj,handle){
    var info = navigator.userAgent;
    var down = null;//用来记录滚轮的上下,down=true表示向下
    if(info.indexOf("Firefox") !=-1){
        obj.addEventListener("DOMMouseScroll",function(event){
            var ev = event ||window.event;
                if(ev.detail>0){
                    //不做具体的事情
                    down = true;
                }else{
                    down = false;            
                }
                //调用外部传递的事件处理程序;
                handle(down,ev);
                //apply 可以让每一个函数都有一个自带的方法叫做apply,
                //这个方法可以切换函数的运行环境,如果函数需要传递参数,以数组的形式传递
                handle.apply(obj,[down,ev]);
        },false);

    }else{

        obj.onmousewheel = function(event){
            var ev = event || window.event;
            if(ev.wheelDelta >0){
                down =false;
            }else{
                down = true;
            }
            handle(down,ev);
            handle.apply(obj,[down,ev]);
            //call 每个函数也都有一个call方法,他的功能和apply一样,
            //都可以实现切换一个函数的调用者(运行环境);
            //call和apply唯一的区别在于:函数有参数的时候,传递方式不一样,call
            //依次传递参数,参数用逗号隔开即可
            handle.call(obj,down,ev);
        }
    }
}

二 拖拽事件的封装函数

function drag(index){

　　index.onmousedown = function(event){
       　　 var ev = event ||window.event;
        　　ev.preventDefault();
       　　 disX = ev.clientX-this.offsetLeft;
      　　  disY = ev.clientY-this.offsetTop;
       　　 //给index绑定moousemove事件
       　　 document.onmousemove = function(event){
         　　   var ev = event ||window.event;
         　　   ev.preventDefault();
          　　  var x = ev.clientX;
          　　  var y = ev.clientY;
          　　  index.style.left = x-disX+'px';
           　　 index.style.top = y-disY+'px';
       　　 }
    　　}
    　　document.onmouseup =function(){
       　　 document.onmousemove = null;
  　　  }

　　}

三检测两个矩形是否发生碰撞

function hitfun(obj1,obj2){
        //什么情况一定碰不到
        var l1 = obj1.offsetLeft;
        var t1 = obj1.offsetTop;
        var r1 = l1+obj1.offsetWidth;
        var b1 = t1+obj1.offsetHeight;

        
        var l2 = obj2.offsetLeft;
        var t2 = obj2.offsetTop;
        var r2 = l2+obj2.offsetWidth;
        var b2 = t2+obj2.offsetHeight;
        if(l1 >r2 || t1 > b2 ||r1<l2 ||b1<t2 ){
                return false;
        }else{
            return true;
        }

四 检测两个圆形是否发生碰撞

//检测两个圆形是否发生碰撞
    function hitfun(obj1,obj2){
        //记录两个圆的半径
        var r1 = obj1.offsetWidth/2;
        var r2 = obj2.offsetWidth/2;
        var l1 = obj1.offsetLeft+r1;
        var t1 = obj1.offsetTop +r1;
        var l2 = obj2.offsetLeft +r2;
        var t2 = obj2.offsetTop +r2;
        var a = l2-l1;
        var b = t2-t1;
        var c = Math.sqrt(Math.pow((l2-l1),2)+Math.pow((t2-t1),2))
        var d = r1+r2;
        if(c <=d){
            return true;
        }else{
            return false;
        }

    }

五 事件封装函数(做了兼容处理)

var EventHandle = {
    addEvent:function(ele,type,handle){
        if(ele.addEventListener){
            ele.addEventListener(type,handle,false);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,handle);
        }else{
            ele["on"+type] = handle;
        }
    },
    deleteEvent:function(ele,type,handle){
        if(ele.removeEventListener){
            ele.removeEventListener(type,handle,false);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,handle);
        }else{
            ele["on"+type] = null;
        }
    }
}