BOM
-
1. 概述
-
浏览器对象模型,提供独立与内容而与浏览器窗口进行交互的对象,核心是
window
-
类别 标准化组织 JavaScript ECMA DOM W3C BOM Netscape浏览器标准一部分 -
BOM和DOM区别
-
BOM包含DOM
-
window对象 > document,location,navigation,screen,history
-
- JS访问浏览器窗口的一个接口
- 全局对象,包含新旧属性/方法
-
-
DOM BOM 文档对象模型 浏览器对象模型 文档
视为对象
浏览器
视为对象
顶级对象– document
顶级对象– window
操作页面元素 浏览器窗口交互 W3C标准 浏览器厂商自定义标准,兼容性较差
-
-
-
2. window对象常见事件
-
事件 作用 注意 窗口加载事件 页面内容完全加载才会触发该事件-onload 1.可将JS代码写在任意位置;2.传统注册事件只能一次, addActionListener()
无限制先加载DOM-DOMContentLoaded 1.图片之类页面元素太多,交互效果等待时间过长,用户体验差 调整窗口大小事件 像素变化就触发,响应式布局-onresize 1. windows.innerWidth/height
-
/*窗口加载事件--------------------------------------------------*/ window.onload = function(){ var btn=document.querySelector('button'); btn.addEventListener('click',function(){ alert('Yes'); }) btn.addEventListener('click',function(){ alert('No'); }) } /* load等页面内容全部加载完毕,包含页面DOM元素 图片 flash css等 */ window.addEventListener('load',function(){ alert('windows'); }) /* DOMContentLoaded 是 DOM 加载完毕,不包含图片 flash css等就可执行, 加载速度比load更快 */ document.addEventListener('DOMContentLoaded',function(){ alert('document'); }) /*窗口加载事件-------------------------------------------------*/
-
-
3. 定时器
-
定时器 停止 setTimeout(回调函数,[延迟毫秒数]) clearTimeout(timeoutID) setInteval(回调函数,[间隔毫秒数]) clearInteval(timeoutID) 设置全局变量 =null -
/**setTimeout(回调函数,[延迟毫秒数])**/ var btn= document.querySelector('button'); var timer1= setTimeout(fn,2000); /*不推荐*/ var timer2= setTimeout('fn()',
-