js原生事件封裝

自己寫的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>