JavaScript (JS)基础：BOM 浅析 (含window对象相关基本方法、属性解析)

① window对象（Math方法也属于window对象）：

window对象是JavaScript中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，window对象下的属性和方法调用的时候可以省略window

例如：window.alert(); window.console; window.document

② BOM中的常用对象、事件

（1）onload事件

window.onload 所有资源加载完成再执行onload里面的代码，包括外部资源（图片、样式、脚步）等都加载完成。如果重复绑定该事件，后面的事件会覆盖前面绑定的事件，需要封装一个onload追加函数，如下：

function addWindowOnload (fn) {

var onload = window.onload;

if (typeof onload === "function") {

window.onload = function () {

onload();

fn();

}

} else {

window.onload = fn;

}

（2）open相关事件

window.open(“http://www.baidu.com” , str) 打开页面，第二个参数str如果是”_self”表示在当前窗口打开页面，如果是”_blank”表示在空白窗口打开页面。该方法会有一个返回值，返回的是打开页面的window对象

window.close() 关闭页面，哪个页面的window对象调用就关闭哪个页面

（3）location对象

window.location.href = “http://www.baidu.com”跳转页面到指定页面

window.location.reload( ) 重新加载页面

window.location.hash 锚点

window.location.host 服务器服务器名+端口号

window.location.hostname 服务器名

window.location.pathname 路径名

window.location.port 端口号

window.location.protocol 协议

window.location.search 传递的参数

（4）navigator对象

window.navigator.userAgent 获取用户浏览器信息

（5）history对象

window.history.forward( ) 前进浏览记录，相当于点击了浏览器的前进按钮

window.history.back( ) 后退浏览记录，相当于点击了浏览器的后退按钮

（6）screen对象

window.screen.width/height 屏幕的宽/高

window.screen.availWidth/availHeight 屏幕的可用宽/高

（7）Date时间对象

new Date() 时间对象

new Date().toDateString( ) 日期 Mon Sep 06 2016

new Date().toTimeString( ) 时间 23:10:54 GMT+0800（中国标准时间）

new Date().toLocaleDateString( ) 本地的日期 2016/9/6

new Date().toLocaleTimeString( ) 本地的时间下午11:10:54

new Date().getTime( ) 获取时间，与valueOf()基本相同

new Date().getSeconds( ) 获取时间秒数

new Date().getMinutes( ) 获取时间分钟数

new Date().getHours( ) 获取时间小时数

new Date().getFullYear( ) 获取年份值

……..等等

（8）设置定时方法

setTimeout(function(){ },time) 设置延时定时器，第一个参数是回调函数，写需要执行代码，第二个是延时时间，单位毫秒。会返回一个该定时器的id

clearTimeout(var) 清理延时定时器

setInterval(function(){ },time) 设置间歇定时器，第一个参数是回调函数，写需要执行代码，第二个是间歇执行时间，单位毫秒。会返回一个该定时器的id

clearInterval(var) 清理间歇定时器

（9）获取计算后样式属性getComputedStyle(obj,null)

可以获取对象的所有样式属性，只要设置了无论是否生效，就能获取该设置的值，没有设置的也能获取其默认值

例如：

#content {

left: 50px;

width: 10px;

height: 10px;

}

var text = document.getElementById("content");

console.log(getComputedStyle(text,null).left); 打印结果为”50px”，此处left既没有设置position属性，即不能生效，又不是行内样式，即obj.style.left获取不到

获取计算后样式值函数兼容性写法封装：

function getStyle(obj, attr) {

if (window.getComputedStyle) {

return window.getComputedStyle(obj, null)[attr];

} else {

return obj.currentStyle[attr];

}

（10）页面窗体事件

a ) 窗体大小发生改变（window.onresize）

window.onresize = function( ) { … }

获取页面宽高函数兼容性写法封装：

function client() {

return {

width: window.innerWidth || document.documentElement.

clientWidth || document.body.clientWidth || 0,

height: window.innerHeight || document.documentElement.

clientHeight || document.body.clientHeight || 0

};

}

b ) 窗体滚动到指定坐标（window.scrollTo( x , y )）以窗体左上角为坐标计算点

window.scrollTo( 0 , 500 )

（11）禁止用户选中页面中的内容window.getSelection

兼容写法：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

③ BOM中的常用属性

（1）offset相关属性（元素）

offsetHeight 获取元素的自身高度（从边框border开始计算），结果为数值，只读属性无法对样式进行设置，style.height只能获取写成行内样式的高度，结果为包含px的字符串

offsetWidth 获取元素的自身宽度（从边框border开始计算），结果为数值，只读属性无法对样式进行设置，style.Width只能获取写成行内样式的宽度，结果为包含px的字符串

offsetParent 距离自身最近的带有定位的父级

offsetTop自身顶部（从border开始计算）到offsetParent顶部（从padding开始计算，不包含border）的距离。offsetTop是以自身border左上角开始计算，style.top只能获取写成行内样式的top，是以自身margin左上角开始计算，

offsetLeft 自身左侧（从border开始计算）到offsetParent左侧（从padding开始计算，不包含border）的距离。offsetLeft是以自身border左上角开始计算，style.Left只能获取写成行内样式的left，是以自身margin左上角开始计算，

（2）scroll相关属性（元素内部内容，包括padding）

scrollHeight 获取元素内部内容的高度

scrollWidth 获取元素内部内容的宽度

scrollTop 获取元素内容被滚动卷去的头部的高度（即内容被滚动后向上移动，容器盒子顶部与其顶部top值的差），一般与onscroll事件联用

一般制作固定导航栏时，给导航栏滚动后追加固定定位样式（position:fixed）即可

scrollLeft 获取元素内容被滚动卷去的左侧的宽度，原理与scrollTop相同

获取页面滚动被卷去值的scroll函数的兼容写法：

function scroll() {

return {

top: window.pageYOffset || document.documentElement.

scrollTop || document.body.scrollTop || 0,

left: window.pageXOffset || document.documentElement.

scrollLeft || document.body.scrollLeft || 0

};

}

（3）client相关属性：

（元素border以内可视区域包括：padding+（content在padding以内区域））

clientHeight 获取元素border以内可视区域的高度

clientWidth 获取元素border以内可视区域的宽度

clientTop 等于元素上边框borderTop，即元素上边框的宽度，包括滚动条宽度

clientLeft 等于元素上边框borderLeft，即元素上边框的宽度，包括滚动条宽度

（4）offset 、scroll 、client具体解析图示：

④事件对象event

（1）事件函数中传入的参数，可以理解为就是事件对象event

document.oncilck = function( event ){ console.log(event) } 结果如下：

可以看到，此参数event打印结果为MouseEvent鼠标事件

该事件对象具备许多内置属性，展开后结果如下：

（2）事件对象的基本属性

a ) 三个重要的坐标

pageX	光标相对于文档页面的水平位置（存在兼容性）
pageY	光标相对于文档页面的垂直位置（存在兼容性）
clientX	光标相对于客户区（浏览器window当前窗口）的水平位置
clientY	光标相对于客户区（浏览器window当前窗口）的垂直位置
screenX	光标相对于用户屏幕的水平位置
screenY	光标相对于用户屏幕的垂直位置

b ) 事件冒泡注册在子元素上的事件会冒泡到父元素上执行（如点击事件，点击子元素，等同于点击了父元素，父元素绑定的点击事件代码也会执行）

阻止事件冒泡：event.stopPropagation()

c ) 事件目标（多用于框架封装）target：触发事件的目标（事件的源头）

document.onclick= function (event) {

console.log(event.target)

}

d ) 事件监听器：给相同的对象重复绑定相同事件，不会出现后面事件覆盖前面事件的情况，绑定的代码都会被执行

添加事件监听器：addEventListener（共有三个参数：事件、执行函数、是否捕获）

btn.addEventListener(“click” , function(){} , false)

第三个参数传入false，表示不使用捕获，事件执行顺序按照冒泡机制，从子级到父级

第三个参数传入true，表示使用捕获，事件执行顺序从父级到子级，从外至内

解除事件监听器：removeEventListener

btn.removeEventListener(“click” , function(){} , false)

只解除对象最后一次绑定的事件，之前绑定的该事件不会被解除

e ) 键盘事件中的键盘码keyCode 按不同键的键盘码不同

onkeydown = function (event) { console.log( event.keyCode ) }

onkeydown和onkeyup事件使用的都是键盘码

onkeypress中使用的是ASCII码

（3）事件对象及其基本相关属性兼容性写法集合如下：

var eventUtil = {

getEvent: function (event) {

return event || window.event;

getPageX: function (event) {

return event.pageX || event.clientX + document.documentElement.scrollLeft;

getPageY: function (event) {

return event.pageY || event.clientY + document.documentElement.scrollTop;

stopPropagation: function (event) {

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

getTarget: function (event) {

return event.target || event.srcElement;

}

};