js事件兼容写法

---

title: js事件兼容写法
date: 2017-11-16 21:58:30
tags:

---

js文件下载：<font style="color: blue;">https://github.com/liuyydi/public</font>

<font style="color:#8d0000;">绑定事件兼容各个浏览器的写法</font>

<font style = "color: #8d0080;">参数：</font>

<font style="color: #000088;">element：</font>代表要绑定事件的元素
<font style="color: #000088;">type：</font>要绑定的事件名，(不含“on”)
<font style="color: #000088;">fn：</font>绑定事件的函数

    function addEvent(element,type,fn){
        if(element.addEventListener){
            element.addEventListener(type,fn,true);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,fn);
        }else{
            element["on"+type]=fn;
        }
    }

<font style="color:#8d0000;">移除事件兼容各个浏览器的写法</font>

<font style = "color: #8d0080;">参数：</font>

<font style="color: #000088;">element：</font>代表要移除事件的元素
<font style="color: #000088;">type：</font>要要移除的事件名，(不含“on”)
<font style="color: #000088;">fn：</font>移除事件的函数

    function removeEvent(element,type,fn){
        if(element.removeEventListener){
            element.removeEventListener(type,fn,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,fn);
        }else{
            element["on"+type]=null;
        }
    }

<font style="color:#8d0000;">取消冒泡兼容各个浏览器的写法</font>

<font style = "color: #8d0080;">参数：</font>

<font style="color: #000088;">ev: </font>要取消冒泡的事件对象

    function stopBubble(ev){
        if(ev && ev.stopPropagation){
            ev.stopPropagation();
        }else{
            ev.cancelBubble=true;
        }
    }

<font style="color:#8d0000;">获取计算后样式兼容的写法</font>

<font style = "color: #8d0080;">参数：</font>

<font style="color: #000088;">element: </font>要获取样式的元素
<font style="color: #000088;">key: </font>要获取的样式

    function getStyle(element,key,wei){
        if(element.currentStyle){
            return element.currentStyle[key];
        }else{
            if(wei==undefined){
                wei=null;
            }
            return getComputedStyle(element,wei)[key];
        }
    }

<font style="color:#8d0000;">滚轮事件兼容各个浏览器的写法</font>

<font style = "color: #8d0080;">参数：</font>

<font style="color: #000088;">ele: </font>要绑定滚轮事件的元素
<font style="color: #000088;">fn: </font>滚轮事件要执行的函数

    function addMousewheel(ele,fn){
        if(navigator.userAgent.indexOf("Firefox")!=-1){
            // 火狐
            ele.addEventListener("DOMMouseScroll",fn,false);
        }else{
            // 谷歌、IE
            ele.onmousewheel=fn;
        }
    }