js原生事件封装

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

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

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

//封装通过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;
}


 
 
第三部分 鼠标拖拽的封装
 
 
//拖拽效果
//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';
}
 
 
第三部分 原生JS实现call、capply、bind
 
 
let test = {
            name: 'test'
        }
        let o = {
            name: 'o',
            fn: function() {
                console.log("this.name:", this.name);
                console.log("arguments:", ...arguments);
            }
        }
        /**
        * 实现call
        */
        Function.prototype.myCall = function(context) {
            // console.log(context) // {name: 'test'}
            // console.log(arguments)
            // console.log(this) //this 即fn
            context._fn_ = this;
            let args = [];
            for(let i = 1; i < arguments.length; i ++) {
                args.push(arguments[i]);
            }
            context._fn_(...args);
            delete context._fn_;
        }
        o.fn.myCall(test, 1, 2, 3)

        /**
        * 实现capply
        */

        Function.prototype.myApply = function(context) {
            context._fn_ = this;
            if(!arguments[1]) {
                context._fn_();
            } else {
                context._fn_(...arguments[1])
            }
            delete context._fn_;
        }
        o.fn.myApply(test, [1,2,3])

        /**
        * 实现bind
        */

        Function.prototype.myBind = function(context) {
            let that = this;
            return function() {
                return that.call(context)
            }
        }
        o.fn.myBind(test)();