浏览器兼容问题日常小结

一、dom事件相关

1. function addEvent(element,event,fn){
    if(element.addEventListener){
     element.addEventListener(event,fn);//w3c模式下支持非ie浏览器

    }else if(element.attachEvent){
    element.attachEvent('on'+event,fn);//ie浏览器
    }
}

2. function removeEvent(element,event,fn){
    if(element.removeEventListener){|//w3c模式下支持非ie浏览器移除事件绑定
          element.removeEventListener(event,fn);
    } else if(element.detachEvent){
        element.detachEvent('on'+event,fn);
    }
}

3.function EventHandler(e) {
    e = e || window.event;//ie不支持event对象，是通过window.event熟悉来实现的
    //防止默认行为
    if(e.preventDefault) {
      e.preventDefault();//W3C实现
    }else{
    e.returnValue =false;//IE实现
    }

//停止向上冒泡
if(e.stopPropagation) {
   //W3C实现
   e.stopPropagation();
    }else{
   //IE实现
    e.cancelBubble =true;
   }
}

4.element.onclick =function() {//事件委托
e = e || window.event;
//获取目标对象
var targetNode = e.target || e.srcElement;//ie

//测试如果点击的是TR就触发

if(targetNode.nodeName.toLowerCase() === 'tr') {alert('You clicked a table row!');

  }
}

5.阻止浏览器默认行为
e.preventDefault();//w3c
event.returnValue = false;//ie
用return false 来阻止并不能覆盖全部的事件  ~~

6.关于event.srcElement 和 event.target 的问题
event.srcElement和event.target的意思都是一样的，都是获取事件的源对象，因为浏览器的兼容问题 event.srcElement 在ie浏览器下存在这个属性 在fixFox下只存在event.target 而在chrome下 两个属性都存在；
所以为了兼容各浏览器 就采取如下方式去兼容
eventObj = event.target ? event.target : event.srcElement;