javascript基础知识 （八） BOM学习笔记

一、什么是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);
            }