一、什么是BOM
BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
二、常见浏览器对象
.onresize 事件会在窗口或框架被调整大小时发生
.onscroll 元素滚动时执行
.close() 关闭当前窗口
.open() 打开页面
.navigator.userAgent 浏览器的信息
.location.（href或hash或search）都是关于网页链接信息
三、event事件对象
当时间触发的时候产生的对象，存储着和事件相关的信息
chrome、firefox、IE9+等：事件函数的第一个形参就是事件对象
chrome、IE：全局变量 event
兼容写法：
document.onclick = function(e){
e = e || window.event;
alert( e );
};
四、鼠标事件
.clientX 存储鼠标相对于窗口的水平坐标
.clientY 存储鼠标相对于窗口的垂直坐标
.pageX 存储鼠标相对于文档的水平坐标（不兼容IE8及以下）
.pageY 存储鼠标相对于文档的垂直坐标（不兼容IE8及以下）
demo:
document.onclick = function(e){
e = e || window.event;
alert( e.cilentY + (document.body.scrollTop || document.documentElement.scrollTop)); //获取鼠标在文档的高度
//document.body 和 document.documentElement 区别
document.body 与 document.documentElement区别介绍
}
五、注册事件 和 解绑事件
1》注册事件的方式其实有2种：一种属性注册，另一种通过方法注册。
①属性注册方式又可分为在HTML元素内的事件属性赋值和通过JS指定元素对象的事件属性。
②方法注册方式可通过addEventListener()或attachEvent()方法进行事件的注册。
说明：在HTML页面中，设置元素属性为一个函数。 语法：<button onclick="func()">点击</button>
通过JS获取元素的对象，设置其事件属性为一个事件处理程序。 语法：EventTarget.onEventName=function(e){}
这边就说说第二种的注册：
//兼容主流浏览器写法 参数：（去掉on的事件名，事件函数，布尔值[可写可不写]）
oBox.addEventListener('click' , function(){
alert('1');
}, false);
//兼容IE8及以下写法 参数：（事件名，事件函数）：
oBox.attachEvent('onclick' , function(){
alert(1);
});
兼容写法：用一个函数包括它们
function addEvent(obj , eName , eFn){
document.addEventListener ? obj.addEventListener(eName, eFn) : obj.attachEvent('on'+eName , eFn);
}
2》解绑事件：
addEventListener 对应 removeEventListener;
attachEvent 对应 detachEvent;
demo:
function fn2(){
alert(1);
}
oBox.addEventListener('click' , fn2);
oBox.removeEventListener('click' , fn2);
oBox.attachEvent('onclick' , fn2);
oBox.detachEvent('onclick' , fn2);
通过addEvenetListener注册的事件，最好不要用匿名事件函数，因为不好解绑
如果说有实际的需要，那么采用自己封装的添加事件 和 解绑事件
解绑匿名事件：
var oBox = document.getElementById('box');
addEvent(oBox , 'click' , function(){
alert('大锤');
});
removeEvent(oBox , 'click' , function(){
alert('大锤');
});
function addEvent( obj , eName , eFn ) {
if (obj[eName+'FLY']){ //用数组把函数存储下来
obj[eName+'FLY'].push(eFn);
}else{
obj[eName+'FLY'] = [eFn];
};
if (document.addEventListener){
obj.addEventListener(eName,eFn);
}else{
obj.attachEvent('on'+eName,eFn);
}
};
function removeEvent( obj , eName , eFn ) {if (obj[eName+'FLY']){ //传递的是匿名函数
for (var i=0;i<obj[eName+'FLY'].length;i++){
if (obj[eName+'FLY'][i]+'' === eFn+''){//把函数转换成字符串 再进行比较
if (document.removeEventListener){
obj.removeEventListener(eName,obj[eName+'FLY'][i]);
}else{
obj.detachEvent('on'+eName,obj[eName+'FLY'][i]);
};
};
};
};
};
综上写一个功能比较齐全的封装：
var oBox = document.getElementById('box');
addEvent(oBox , 'click' , function(){
alert('大锤');
});
addEvent(oBox , 'click' , fn2);
removeEvent(oBox , 'click' , function(){
alert('大锤');
});
function addEvent( obj , eName , eFn ) {
if (obj[eName+'FLY']){
obj[eName+'FLY'].push(eFn);
}else{
obj[eName+'FLY'] = [eFn];
};
if (document.addEventListener){
obj.addEventListener(eName,eFn);
}else{
obj.attachEvent('on'+eName,eFn);
}
};
function removeEvent( obj , eName , eFn ) {
if (eFn){
if (document.removeEventListener){ //有名函数
obj.removeEventListener(eName,eFn);
}else{
obj.detachEvent('on'+eName,eFn);
};
if (obj[eName+'FLY']){ //传递的是匿名函数
for (var i=0;i<obj[eName+'FLY'].length;i++){
if (obj[eName+'FLY'][i]+'' === eFn+''){
if (document.removeEventListener){
obj.removeEventListener(eName,obj[eName+'FLY'][i]);
}else{
obj.detachEvent('on'+eName,obj[eName+'FLY'][i]);
};
};
};
};
}else{//不传函数参数则全部解除
if (obj[eName+'FLY']){ //全部解绑
for (var i=0;i<obj[eName+'FLY'].length;i++){
if (document.removeEventListener){
obj.removeEventListener(eName,obj[eName+'FLY'][i]);
}else{
obj.detachEvent('on'+eName,obj[eName+'FLY'][i]);
}
};
};
};
};
function fn1() {
alert('大狗蛋');
};
function fn2() {
alert('小狗蛋');
};
六、滚动事件
1》在IE各版本 和 谷歌中 兼容onmousewheel
火狐中只能通过 addEventListener 注册
document.onmousewheel = function(){
console.log(1);
};
document.addEventListener('DOMMouseScroll',function () {//火狐写法
console.log(1);
});
兼容写法：
function mousewheel(obj , eFn) {
document.onmousewheel === null?obj.onmousewheel=eFn:obj.addEventListener('DOMMouseScroll',eFn);
}
2》滚动值 wheelDelta 和 detail
在chrome和IE里，值是120的倍数，负值代表向下滚轮（贴近胸），正值代表向上滚轮（往上推）
console.log(e.detail); //在firefox里，值是3的倍数，负值代表向上滚轮（往上推），正值代表向下滚轮（贴近胸）
demo:
var oImg = document.getElementById('img');
var prop = 1;
var w = oImg.width;
mousewheel(oImg , function(e){
//console.log(1);
e=e||window.event;
var delta = e.wheelDelta/120 || -e.detail/3;//判断delta的正负就可以知道向上滚轮还是向下滚轮
if (delta<0){
prop -= 0.05;
}else{
prop += 0.05;
};
console.log(w);
this.width = w*prop;
});
function mousewheel(obj , eFn) {
document.onmousewheel === null?obj.onmousewheel=eFn:obj.addEventListener('DOMMouseScroll',eFn);
}