BOM:Browser Object Model(浏览器对象模型),浏览器模式提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构,就是浏览器提供的API
1、window对象--BOM的核心,是js访问浏览器的接口,也是ES规定的Global对象
2、location对象:提供当前窗口中的加载的文档有关的信息和一些导航功能。既是window对象属性,也是document的对象属性
3、navigation对象:获取浏览器的系统信息
4、screen对象:用来表示浏览器窗口外部的显示器的信息等
5、history对象:保存用户上网等历史信息
window:
alert(); 系统警告对话框
confirm();系统确认对话框
prompt(); 提示对话框
open(); window.open(要加载的url,窗口目标,一个特定字符串,一个新页面是否取代浏览器历史记录中当前加载页面的布尔值)
onerror();window.onerror(描述错误的一条消息,字符串--存放引发错误的JavaScript代码所在的文档url,文档中发生错误的行数)
setTimeout();window.setTimeout(function(){}, 毫秒)
setInterval(); window.setInterval(function(){}, 毫秒)
窗口位置
screenLeft 窗口相对于屏幕左边的位置
screenTop 窗口相对于屏幕上边的位置(ie,chrome,safari)
screenX 窗口相对于屏幕左边的位置
screenY 窗口相对于屏幕上边的位置(firefox)
moveBy(x,y); 接收的是在水平和垂直方向上移动的像素数
moveTo(x,y); 接收的是新位置的x和y坐标值
窗口大小
innerWidth、innerHeight
IE9+、Safari、Firefox、Opra:该容器中页面视图区的大小
Chrome:返回视口大小
移动设备:返回可见视口
移动IE浏览器:不支持该属性,当移动IE浏览器将布局视口的信息保存至 document.body.clientWidth和document.body.clientHeight中
outerWidth、outerHeight
IE9+、Safari、Firefox:返回浏览器窗口本身的尺寸
Opera:返回页面视图容器的大小
Chrome:返回视口大小
resizeTo(width, height):接收浏览器窗口的新宽度和新高度
resizeBy(width, height):接收新窗口与原窗口的宽度和高度之差
定时器
setTimeout
setInterval
Location对象:
hash:返回url中的hash(#后字符>=0)
host:服务器名称+端口(如果有)
hostname:只含服务器名称
href:当前加载页面的完整的url
pathname:返回url的目录和(或)文件名
port:url的端口号,如果不存在则返回空
protocol:页面使用的协议
search:返回url的查询字符串,以问号开头
navigation接口表示用户代理的状态和标识
appcodeName 浏览器的名称
appMinorVersion 次版本信息
appName 完整的浏览器名称
buildID 浏览器编译版本
cookieEnabled 表示cookie是否启用
cpuClass 客户端计算机中使用的CPU类型
javaEnabled 表示当前浏览器中是否启用了Java
language 浏览器的主语言
mimeTypes 主浏览器中注册的MIME类型数组
onLine 表示浏览器是否连接到了因特网
opsProfile 似乎早就不用了。
oscpu 客户端计算机的操作系统或使用的CPU
Platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数组
preference 设置用户的首选项
product 产品名称
productSub 关于产品的次要信息
register-ContentHandler() 针对特定的MIME类型将一个站点注册为处理程序
register-ProtocolHandler() 针对特定的协议将一个站点注册为处理程序
securityPolicy 已经废弃。安全策略的名称。为了与Netscape Navigator 4 向后兼容而保留下来
screen对象
availHeight 屏幕的像素高度减系统部件高度之后的值(只读)
availLeft 未被系统部件占用的最左侧的像素值(只读)
availTop 未被系统部件占用的最上方的像素值(只读)
availWidth 屏幕的像素宽度减系统部件宽度之后的值(只读)
bufferDepth 读、写用于呈现屏外位图的位数
colorDepth 用于表现颜色的位数;多数系统都是32(只读)
deviceXDPI 屏幕实际的水平DPI(只读)
deviceYDPI 屏幕实际的垂直DPI(只读)
footSmooth-ingEnabled 表示是否启用了字体平滑(只读)
height 屏幕的像素高度
left 当前屏幕距左边的像素距离
logicalXDPI 屏幕逻辑的水平DPI(只读)
logicalYDPI 屏幕逻辑的垂直DPI(只读)
pixelDepth 屏幕的位深(只读)
History对象
go() 以在用户的历史记录中任意跳转,go(n)表示前进n页,go(-n)表示后退n页
go()可以传递字符串参数,浏览器历史中如果有这条URL则实现跳转至包含该字符串的第一个位置,否则什么也不做
back() 后退一页
forword() 前进一页
length 保存历史记录的数量,可用于检测当前页面是否是用户历史记录的第一页(history.length === 0)
pushState
onPopState
事件模型:
window->document->body->div:捕获
div->body->document->window:冒泡
addEventListener的第三个参数,如果为true,就代表着捕获阶段执行。若为false,就代表着冒泡阶段执行。
attachEvent--兼容IE7、IE8,不支持第三个参数来控制在哪个阶段发生,默认绑定在冒泡阶段发生。
e.target.nodeName: 指当前点击的元素
e.currentTarget.nodeName: 指的是绑定事件监听的元素
阻止事件传播:e.stopPropagation(),不仅能阻止冒泡还能阻止捕获
stopImmediatePropagation():如果多个相同类型的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了e.stopImmediatePropagation()方法,则当前元素剩下的监听函数不会被执行。
阻止事件的默认行为:e.preventDefault()