js事件中的一些兼容写法总结

事件中兼容还是挺多的，这里稍微总结下，大家还得多看多背才能熟记

1.获取行内样式兼容

function getStyle(ele,attr){

if(window.getComputedStyle){

//通常方法获取

return window.getComputedStyle(ele,false)[attr];

}else{

//ie兼容

return ele.currentStyle[attr];

}

}

---

2.键盘事件keycode兼容

keycode 不区分大小写, 返回大写的英文字母的ASCII编码

ie写法：e.which

         var keyCode = e.keyCode || e.which;

---

3.阻止浏览器默认行为

var preventDefault = function(){

    if(event.preventDefault){

        event.preventDefault();

//ie写法

    }else{

        event.returnValue = false;

    }

}

或return false/0  

---jquery 中return false 不仅会阻止浏览器默认行为，还会阻止冒泡

--- 如果函数以后想反回布尔类型的值， 用0和1代替

---

4.事件委托和event兼容

var getEvent = function(event){

    event = event || window.event;

事件委托：（event.srcElement：ie写法）

    return event.target || event.srcElement;

}

---

5.阻止事件冒泡兼容

btn.onclick = function (ev) {

            ev = ev || window.event;

//通常写法

            if(ev.stopPropagation) {

                ev.stopPropagation();

            } else {

//ie写法

                ev.cancelBubble = true;

            }

        }

---

6.事件绑定监听事件兼容

var handle = {

//调用使用事件绑定

            addHandle: function(ele, type, event) {

//浏览器当有addEventListener事件，执行，否则执行下面

                if(ele.addEventListener) {

                    ele.addEventListener(type, event, false);

//浏览器当有attachEvent事件，执行，否则执行下面

                } else if(ele.attachEvent) {

//ie要注意事件类型要  加on

                    ele.attachEvent('on' + type, event);

                } else {

                  ele['on' +type] = event;

                }

            },

//移除监听

            removeHandle: function(ele, type, event) {

//浏览器当有removeEventListener事件，执行，否则执行下面

                if(ele.removeEventListener) {

                    ele.removeEventListener(type, event, false);

//浏览器当有detachEven事件，执行，否则执行下面

                }  else if(ele.detachEvent) {

                    ele.detachEvent('on' + type, event);

                } else {

                  ele['on' +type] = null;

                }

            }

        }