js中IE浏览器兼容性问题----获取元素对象外部样式、DOM2级添加和删除事件、事件对象的兼容性写法

本文链接：https://blog.csdn.net/qq_38594056/article/details/106173417

window.getComputedStyle（）方法

//兼容的写法：获得指定元素的指定样式的值

//定义函数 获得内部样式表对象
function getStyle(ele) {
    return getComputedStyle ? getComputedStyle(ele) : ele.currentStyle;
}

上面代码调用的时候举例：
getStyle(元素节点).bottom
getStyle(元素节点).top

另一种：

function getStyle(ele,cssName) {
    if (window.getComputedStyle){
        return window.getComputedStyle(ele)[cssName]
    }
    return ele.currentStyle[cssName];
}

DOM2级兼容性写法：

ele：添加事件的元素节点对象
elentName：事件名称
callback：事件处理函数
eventStream：事件流（页面中事件被相应的顺序，包括：
【事件冒泡fasle：从当前元素向父节点扩散】，
【事件捕获true：从根节点开始，逐渐向当前元素扩展】）
添加事件

   function addEvent(ele,eventName,callback,eventStream) {
        if (ele.addEventListener){//正常版本
            ele.addEventListener(eventName,callback,eventName)
        }else {//IE低版本
            ele.attachEvent('on'+eventName,callback);
        }
    }

删除事件

    function removeEvent(ele,eventName,callback,eventStream) {
        if (ele.addEventListener){//正常版本
            ele.removeEventListener(eventName,callback,eventName)
        }else {//IE低版本
            ele.detachEvent('on'+eventName,callback);
        }
    }

事件对象的获取兼容写法

1.事件对象：js内置对象，当事件被触发时底层产生的一个针对该事件的一个对象，记录了当前事件的相关信息。
例如：鼠标点击事件对象中，包含了事件的类型和鼠标点击的位置信息等
2.捕获事件对象：
① 主流浏览器，谷歌火狐等，事件对象是以实参的方式传递
②IE8以下，需要用window.event
事件对象的获取兼容写法如下：

  元素.onclick=function (e) {
        e=e||window.event;
        console.log(e)
    }

事件常用方法：preventDefault()
作用：取消默认行为，如取消右侧右击菜单、用来页面跳转的超链接。
格式：事件对象.preventDefault();
注意：该方法在IE低版本8 及其以前的版本不支持。
可以使用事件对象.returnValue = false; 替代。
兼容写法：

e.preventDefault ? e.preventDefault():(e.returnValue=false);

事件对象方法：stopPropagation （）
作用：用来阻断冒泡的实现
IE8及以下不支持，需要写cancelBubble = true;来实现冒泡阻断

e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;