js原生代码，关于事件的兼容方案，添加/移除事件监听、停止冒泡，css属性获取...

//js原生代码，兼容方案

//添加事件 
function addEvent(el , eventName , fn) {
 　　if(el.attachEvent) {  //IE
 　　　　el.attachEvent('on'+eventName,fn);
 　　}else if(el.addEventListener) {
 　　　　el.addEventListener(eventName,fn);
 　　}else {
 　　　　el['on'+eventName] = fn;
 　　}
 }
//注意addEventListener添加相同事件的不同函数，按添加顺序，先添加的先触发，后添加的后触发
//attachEvent在ie8以下（包括ie8），相反顺序触发，后添加的先触发。在ie9以上（包括ie9）顺序与addEventListener相同.例子如下：
        var testDiv = document.getElementById('testDiv');
        testDiv.attachEvent('onclick',func1);
        testDiv.attachEvent('onclick',func2);
        testDiv.attachEvent('onclick',func3);

        function func1() {
            alert(1);
        }
        function func2() {
            alert(2);
        }
        function func3() {
            alert(3);
        }
ie8以下（包括ie8）输出： 3 2 1
ie9以上（包括ie9）输出： 1 2 3  （addEventListener相同）

添加事件

// 删除事件
function removeEvent(el , eventName , fn) {
　　if(el.detachEvent) {
　　　　el.detachEvent('on'+eventName,fn);
　　}else if(el.removeEventListener) {
　　　　el.removeEventListener(eventName,fn);
　　}else {
　　　　el['on'+eventName] = null;
　　}
}

删除事件

//停止冒泡
 function stopPropagation(event) {
    event = event || window.event;
    if (event.stopPropagation) {
        event.stopPropagation()
    } else {// IE
        event.cancelBubble = true
    }
} 

停止冒泡

//获取元素css属性值
 function getStyle(obj, attr) {
 　　if (obj.currentStyle) {//IE
　　　　 return obj.currentStyle[attr];
 　　} else {
　　　　 return getComputedStyle(obj, "伪类")[attr];//Firefox
 　　}
 }

获取元素css属性值

 

转载于:https://www.cnblogs.com/LXY02/p/6759327.html