web前端开发第二阶段——BOM浏览器对象模型

一、浏览器代理信息navigator

浏览器用户管理
window.navigator.userAgent

二、event事件

wheelDelta 滚动方向(谷歌浏览器） >0 为向上滚动 <0 为向下滚动
detail滚动方向(火狐浏览器）>0 为向下滚动 <0 为向上滚动

封装的js

/*
	鼠标滚轮兼容浏览器
	参数：
		obj:添加滚轮事件的元素
		upFn:向上执行函数
		downFn:向下执行函数
*/


function wheel(obj, upFn, downFn) {
   
	//BOM代理判断是什么浏览器
	var str = window.navigator.userAgent;
	if (str.indexOf('Chrome') != -1) {
   
		//谷歌,wheelDelta
		obj.addEventListener('wheel', function(ev) {
   
			ev = ev || window.event;
			//向上滚动
			if (ev.wheelDelta > 0) {
   
				typeof upFn == 'function' && upFn();
			}
			//向下滚动
			if (ev.wheelDelta < 0) {
   
				typeof downFn == 'function' && downFn();
			}
		})
	} else if (str.indexOf('Firefox') != -1) {
   
		//火狐,判断滚轮方向  detail
		obj.addEventListener('DOMMouseScroll', function(ev) {
   
			ev = ev || window.event;
			if (ev.detail > 0) {
   
				// down
				typeof downFn == 'function' && downFn();
			} else {
   
				// up
				typeof upFn == 'function' && upFn();
			}
		})
	} else