（转） js原生事件封装

第一部分 event 添加事件，删除事件，以及冒泡的屏蔽，并都做了兼容性的处理

<span style="font-size:24px;">var event = {
    //添加句柄  添加事件
    addHandler:function(element,type,handler){
        //ele 元素
        //type 事件类型
        //handler 处理事件的函数程序
        if (element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if (element.attachEvent) {
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;
        }
    },
    //删除句柄  删除事件
    removeHandler:function(element,type,handler){
        if (element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if (element.detachEvent) {
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type] = null;
        }
    },
    //兼容event
    getEvent:function(event){
        return event?event:window.event;
    },
    //获取事件类型
    getType:function(event){
        return event.type;      //不存在浏览器兼容的问题
    },
    //获取事件目标
    getElement:function(event){
        return event.target || event.srcElement;
    },
    //阻止事件冒泡
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    //阻止事件的默认行为
    stopPropagation:function(event){
        if (event.stopPropagation) {
            event.stopPropagation();
        }else{
            event.cancleBubble = true;
        }
    }
}
</span>

第二部分 getByClass 对原生获取class的封装

<p></p><pre name="code" class="javascript"><span style="font-size:24px;">//封装通过class取元素
function getByClass(className,parent){
    //className 类名  必须
    //parent父元素   可选
    //对父元素进行处理
    var oParent = parent ? document.getElementById(parent):document,
    eles = [],
    elements = oParent.getElementsByTagName('*');
    for(var i = 0 , l = elements.length ; i < l ; i ++){
        if(elements[i].className == className){
            eles.push(elements[i]);
        }
    }
    return eles;
}
</span>

第三部分 鼠标拖拽的封装

<pre name="code" class="javascript"><span style="font-size:24px;">//拖拽效果
//windown.onload = drag;
 
function drag(){
    var oTitle = getElementByClass('login_logo_webqq','loginPanel')[0];
    oTitle.onmousedown = fnDown;
}
function fnDown(event){
    event = event || window.event;
    var oDrag = document.getElementById('loginPanel'),
        //光标按下时光标和面板之间的距离
        disX = event.clientX - offsetLeft,
        disY = event.clientY - offsetTop;
    //移动
    document.onmousemove = function(event){
        event = event || window.event;
        fnMove(event,disX,disY);
    }
    //释放鼠标
    document.onmouseup = function(){
        document.onmousemove = null;    //卸载事件
        document.onmouseup = null;      //卸载本身
    }
}
function fnMove(e,posX,posY){
    var oDrag = document.getElementById('loginPanel'),
        l = e.clientX - posX,
        t = e.clientY - poxY;
        winW = document.documentElement.clientWidth || document.body.clientWidth,   //获取窗口的宽和高
        winH = document.documentElement.clientHeight || document.body.clientHeight,
        maxW = winW - oDrag.offsetWidth,
        maxH = winH - oDrag.offsetHeight;
 
    //解决拖拽超出边界的问题
    if (l<0) {
        l = 0 ;
    }else if (l > maxW) {
        l = maxW;
    }
    if (t < 0) {
        t = 0;
    }else if (t > maxH) {
        t = maxH;
    }
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';
}</span>