BOM属性 事件对象

1.window对象

1、 window的系统对话框

• alert(提示内容)

• console.log()

• confirm(提示信息) 带确定和取消按钮 点击确定返回true 点击取消返回false

• prompt(提示信息,输入框中的默认值) 点击确定返回输入框中的值 点击取消返回null

2、 window的open和close

• window.open

  • 语法：window.open(新的网址地址,打开方式(self,blank),设置新页面的样式)

  • 作用：打开一个新网址

• window.close

• 作用：关闭当前页面

2.window的事件

（1）window.onload

         作用： window.onload 确保标签和资源都加载成功之后再加载window.onload里面的内容

（2）window.onload

        作用： window.onload 确保标签和资源都加载成功之后再加载window.onload里面的内容

（3）window.onresize

       作用：当窗口的可视区域发生改变触发

3.BOM的三大系列属性

1、client系列

• 元素.clientWidth：获取元素的可视宽度 content+padding

• 元素.clientHeight：获取元素的可视高度

• 元素.clientLeft和元素.clientTop：获取元素的左或上边框宽度

2、offset系列

• 元素.offsetWidth 获取元素的占位宽度 content+padding+border

• 元素.offsetHeight 获取元素的占位高度

• 元素.offsetLeft 可以获取元素到最近定位父元素的左侧距离 如果没有最近定位父元素，则是相当于body

• 元素.offsetTo p可以获取元素到最近定位父元素的上侧距离 如果没有最近定位父元素，则是相当于body

3、scroll系列

• 元素.scrollWidth 可以获取到元素的内容宽度

• 元素.scrollHeight 可以获取到元素的内容高度

• 元素.scrollLeft 可以获取元素内容被卷去的宽度

• 元素.scrollTop 可以获取元素内容被卷去的高度

注意：scrollTop和scrollLeft也可以设置具体被卷起的高度和宽度

2.6.4 页面的可视宽/占位宽/卷起的高宽

• document.documentElement 根标签html

• document.body body标签

• ==兼容问题==

  • document.documentElement存在兼容问题 IE6和5无法获取client系列和scroll系列的值

  • ==页面卷起高度兼容== document.documentElement.scrollTop ||   document.body.scrollTop

43.事件对象

4.1什么是事件对象

• 每一个事件 都会拥有一个对象，这个对象用来纪律该事件的重要信息

• 注意：事件对象只能存在于事件处理函数中 超过这个范围就不能使用了

4.2如何获取事件对象

• 标准浏览器和IE浏览器：window.event

• 火狐低版本浏览器：将事件处理函数中的第一个参数作为事件对象