js常用的兼容性

市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。

浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。

1.chrome认为文档实在body标签上 ；FF/chrome认为文档实在html标签上

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

2.获取滚动条的距离

var sTop=document.documentElement.scrollTop  ||   document.body.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.keyCode  ||   e.which

7.输出文本

var text = innerText || textContent;

 innerText问题
说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent。
解决方法：elem.innerText = elem.textContent = “值”

8.事件监听(可绑定多个事件)

addEventListener('事件名(无on)','事件函数',true/false)       removeEventListener ()

attachEvent()                                         detachEvent()            ===>  IE兼容

9.阻止浏览器的默认行为

function prevent(e){

     if(e.preventDefault){

          e.preventDefault();

     }else{

          e.returnValue=false;(ie)

   }

}

一般建议直接使用return false阻止，但和取消默认事件的含义是不同的。

10.阻止事件冒泡

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

- 事件对象中的重要属性

    - target

        - 真正被点击的元素（通常是底层元素）

    - currentTarget

        - 当前正在处理事件的元素/被绑定事件的元素（通常是祖先元素）

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

- 取消冒泡

    - 通过事件对象来取消冒泡

    - 事件对象有一个 cancelBubble 属性专门用来取消冒泡(微软)

        - 示例： event.cancelBubble = true;

        - 示例： 给中间元素设置取消冒泡，点击底层元素，观察效果

 

 11.创建ajax对象

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

12.滚轮事件(鼠标移动到元素上的滚轮事件)

- 滚轮是用户在访问网站的时候常用的一个操作

- 滚轮事件逻辑本身并不复杂，但是由于浏览器厂商在实现的时候的不同, 给程序员带来了很多麻烦

- 滚轮事件有两套，分别针对 （chrome、IE） 和 （FireFox） 

        - 滚轮（chrome、IE）
		- 事件名：onmousewheel
		- 绑定： div.onmousewheel = function(){}
		- 取值：	event.wheelDelta
			- 方向
				- 正值：滚轮是**向上**滚动
				- 负值：滚轮是**向下**滚动
			- 大小
				- 均为 150 的倍数，即：幅度大小 = 返回的值 / 150
	- 滚轮（FireFox）
		- 事件名：DOMMouseScroll
		- 绑定： div.addEventListener('DOMMouseScroll', function(){}, false);
		- 取值：	event.detail
			- 方向
				- 负值：滚轮是**向上**滚动
				- 正值：滚轮是**向下**滚动
			- 大小
				- 均为 3 的倍数，即：幅度大小 = 返回的值 / 3
- 当滚轮事件冲突的时候，需要禁止默认行为
	- （chrome、IE）
		- return false 即可
	- （FireFox） 
		- 需要对事件使用 preventDefault()
		- 通知浏览器不要执行与事件关联的默认动作
		- 示例
			- event.preventDefault(); 
- 注意：
	- 程序员一般只关注滚动的方向，不关注滚动的幅度
	- preventDefault() 是标准方法。但是，老旧 IE 不支持这个方法，调用时会报错
	
	-禁止默认行为
    	- event.preventDefault;
    	- return false;