欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生JS学习笔记(三)

程序员文章站 2022-06-10 14:45:11
...

原生JS学习笔记(三)
本周学习总结如图。
同时要注意各种兼容问题,
1、兼容的封装:正常浏览器和IE8及以下:非行内样式的操作

function getStyle(ele,attr){
    if(Element.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

2、赋值式事件的绑定的兼容:

eve || window.event

3、获取键盘按键的兼容:

e.keyCode || e.which

4、事件冒泡的兼容

function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation()         //正常
        }else{
            e.cancelBubble = true;      //IE
        }
    }

5、取消浏览器默认事件的兼容

function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault();     //正常
        }else{
            e.returnValue = false;  //IE
        }
    }

6、事件监听的兼容

function addEvent(ele,myevent,cb){
        if(ele.attachEvent){
            ele.attachEvent("on"+myevent,cb)            //IE
        }else{
            ele.addEventListener(myevent,cb,false)     //正常
        }
    }

7、事件委托的兼容

e.target || e.srcElement

8、事件委托的封装

function eveEnt(ele,cb){
        return function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
            for(var i=0;i<ele.length;i++){
                if(target === ele[i]){
                    cb.bind(target)();
                }
            }
        }
    }

同时若是使用事件委托,尽量使用监听式事件绑定

相关标签: 兼容 封装