BOM

BOM

// 浏览器对象模型，提供了独立于内容而于浏览器窗口进行交互的对象，
// 其核心是window

// BOM构成
// js访问浏览器窗口的一个接口
// 是一个全局对象，定义在全局
// 作用域中的变量、函数都会变成window对象的属性和方法
// 调用时可以省略window，如alert()、prompt()等

DOM与BOM

// DOM文档对象模型
// 把文档当成一个对象
// DOM顶级对象是document
// DOM主要是操作页面元素
// DOM是W3C规范标准

// BOM浏览器对象模型
// 把浏览器当成一个对象
// BOM顶级对象是window
// BOM主要是浏览器窗口交互的一些对象
// BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

├── window
│   ├── document
│   ├── location
│   ├── navigation
│   ├── screen
│   ├── history

常见事件

// 窗口加载事件
// 文档完全加载会触发该事件（包括图形、脚本文件、CSS文件等）

// 多个函数会被覆盖
window.onload = function (){...}

// 单个均会触发，不会被覆盖
window.addEventListener('load',function (){...})

// DOM完全加载会触发（不包含图片、flash、CSS）
document.addEventListener('DOMContentLoaded',function (){...})

// 调整窗口大小事件
// 窗口大小像素变化触发
window.onresize = function (){...}
window.addEventListener('resize',function (){...})

// 滚动条事件
window.addEventListener('scroll',function (){...})

// 鼠标mouseover mouseenter
// 鼠标经过子元素也会触发父元素mouseover事件
// 鼠标只经过父元素触发mouseenter事件 即mouseenter不会冒泡

// 定时器 函数内部this指向window
// function调用函数
// delay延迟时间 ms毫秒 调用一次
var timer = (window.)setTimeout(function,delay)
clearTimeOut(timer)

// function调用函数
// delay延迟时间 ms毫秒 每隔delay调用一次
var timer = (window.)setInterval(function,delay)
clearInterval(timer)

执行队列

// 同步
// 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的

// 异步
// 做一件事情花费很长时间，在做这件事的同时还可以处理其他事情

// 同步任务都在主线程上执行，形成一个执行栈

// 异步任务通过回调函数实现
// 异步任务相关回调函数添加到任务队列(消息队列)中
// 异步任务一般包括普通事件(click,resize) 
// 资源加载(load,error) 定时器(setInterval,setTimeout)

// js执行机制
// 先执行执行栈中的同步任务
// 异步任务回调函数放入任务队列中
// 一旦执行栈中的所有同步任务执行完毕，系统就会按照次序读取任务队列中的
// 异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

// 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行
// 这种机制被称为时间循环event loop

location对象

location.href // 获取或者设置 整个URL
location.host // 返回主机（域名）
location.port // 返回端口号 如果未写返回 空字符串
location.pathname // 返回路径
location.search // 返回参数
location.hash // 返回片段 #后面内容 常见于链接 锚点

// 跳转
location.href = 'https://www.xxx.xx'

location.assign() // 跳转重定向页面，记录浏览历史，可以后退
location.replace() // 替换当前页面，不记录历史，不能后退
location.reload() // 重新加载页面，相当于刷新按钮或者F5 参数为true 强制刷新

navigator对象

// 包含有关浏览器的信息，常用userAgent，
// 可以返回由客户机发送服务器的user-agent头部的值

history对象

history.forward() // 前进
history.back() // 后退
history.go() // 前进后退功能 1 前进1个页面 -1 后退1个页面