js的兼容性及处理方法

1.关于获取行外样式的兼容性

通过js我们不能通过（HTML元素.style.样式属性）获取到页面上元素的行内样式，我们可以通过一下两个方法来获取行内样式
1.getComputedStyle(oDiv,false)
兼容Firefox，Opera，Safari，Chrome，不兼容IE
2.currentStyle
IE下获取行内样式
oDiv.currentStyle.width
这里封装了一个兼容所有浏览器的函数

  funtion getStyle(obj,name){
  if(obj.currentStyle){
         return obj.currentStyle[name];
     }else{
         return getComputedStyle(obj,false)[name];
     }
 }

2. 事件中兼容性问题

window.event只能在IE下运行, Firefox必须从源处加入event作参数传递。我在拖拽事件的项目中经常遇到这事件的兼容性问题
var e = e || event；

	var obox = document.getElementById('drag')
	//1、给需要移动的元素添加onmousedown事件,给拖动做好准备
	obox.onmousedown = function(e) {
	var e = e || event; //获取事件对象，这个是兼容写法
	var disX = oEvent.clientX - parseInt(obox.style.left);
	var disY = oEvent.clientY - parseInt(obox.style.top);
	document.onmousemove = function(e) { //实时改变目标元素obox的位置
			var e = e || event;
			obox.style.left = e.clientX - disX + 'px';
			obox.style.top = e.clientY - disY + 'px';
		}
		//停止拖动  解绑事件
	document.onmouseup = function() {
		document.onmousemove = null;
		document.onmouseup = null;
	}

3. 阻止事件冒泡

在IE下面阻止冒泡的事件是e.cancelBubble
在e.stopPropagation() 是我们现在比较标准的写法

e.stopPropagation() || e.cancelBubble    

注意：stopPropagation()是一个方法，而cancelBubble 是属性，默认值是true

4. 阻止浏览器默认行为

e.preventDefault() ||  e.returnValue = false

5. DOM事件监听的兼容性

IE8以上及其他浏览器 ：监听addEventListener 解除监听 removeEventListener
IE8及以下 ：监听attachEvent 解除监听detachEvent

//obj 给指定的元素添加事件 
//type 事件的类型
//fn 函数 
//useCapTure 捕获还是冒泡
function addEvent(obj,type,fn){
   if(obj.addEventListener){
        obj.addEventListener(type,fn,useCapTure)
    }else{
        obj.attachEvent("on"+type,fn)
    }
}

6. 创建ajax对象

IE低版本浏览器： ActiveXObject(“Microsoft,XMLHTTP”)
Chrome等其他浏览器 ： var xhr = new XMLHttpRequest()

  var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP") 

7.DOM 的childNodes 获取子节点的兼容性问题

• IE8以下:获取的是元素节点
• 高版本浏览器::获取的包含文本节点和元素节点
  解决方法: 使用nodeType:节点的类型，并作出判断
  • 文本节点 nodeType=3
  • 元素节点 nodeTyPE=1