JavaScript常用的兼容

开始之前谈谈主流浏览器的内核，浏览器内核主要有四种Trident、webkit、blink、Gecko

浏览器	内核
chrome	webkit内核现在是blink内核
IE浏览器	Trident内核
Safari	Webkit内核
Opera	最初是自己的presto，后来加入谷歌大军，从weblit到blink
firefox	Gecko内核俗称firefox内核
360	IE+chromoe双内核
猎豹	IE+chromoe双内核
百度	Trident
QQ	Trident+webkit

正是因为这些浏览器使用的内核不一样活着浏览器版本的的升级，需要做一些兼容

1.chrome认为文档是在body标签上 ；Fierfox/chrome认为文档是在html标签上

var body = document.body || document.documentElement;

2.获取滚动条距离

varsTop=document.body.scrollTopdocument||documentElement.scrollTop  

3.网页可视区

window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidth

4.事件对象

var e = event || window.event

5.获取事件源/事件目标对象

e.target || e.srcElement;

6.获取键盘信息

e.target || e.srcElement;

7.输出文本

var text = innerText || textContent;

说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent。
解决方法
8.事件监听

addEventListener('事件名(无on)','事件函数',true/false)//现代浏览器
attachEvent() //ie8以下 

9.阻止浏览器默认行为

function prevent(){
	if(e.preventDefault){
	   e.preventDefault();
	}else{
	   e.returnValue=false;(ie)
	}
}

10.阻止事件冒泡

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

说明：e.cancelBubble=true;兼容Ie8以下，现在浏览器也支持
事件对象中的重要属性
target
-真正被点击的元素（通常是底层元素）
currentTarget
当前正在处理事件的元素/被绑定事件的元素（通常是祖先元素）

另一种阻止冒泡的方式： event.target == event.currentTarget;自己被点击自己被处理

11.创建ajax对象

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