市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是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;