js native event encapsulation

Some encapsulation of js events written by myself, only used for study notes 

The first part of the event adds events, deletes events, and bubbling shields, and handles them for compatibility

<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>

The second part getByClass encapsulates the native 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>

The third part is the encapsulation of mouse dragging

<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>