后浪小萌新JS --- BOM和事件

一、BOM操作

1. 什么是BOM

   browser object model — 浏览器对象模型
   js提供了一个window对象, 表示整个浏览器。

2. window对象

   js中定义的全局变量, 都是绑定在window对象上的属性

二、窗口基本操作

1. 新建窗口

   新建一个空的窗口并且返回一个窗口对象:window.open()
   创建一个有界面的窗口window.open(‘html地址’)
   创建一个独立的窗口并且设置窗口大小window.open(‘html地址’, ‘’, ‘width=宽度值,height=高度值’)

2. 关闭窗口

   窗口对象.close()

3. 移动窗口(只针对独立存在的小窗口有效)

   窗口对象.moveTo(x坐标,y坐标)

4. 获取窗口的宽度和高度

   窗口对象.innerWidth\窗口对象.innerHeight - 获取浏览器显示网页内容部分的有效宽度

   窗口对象.outerWidth\窗口对象.outerHeight - 获取整个浏览器的宽度和高度

5. 修改窗口中的内容

   窗口对象.location = 新的页面地址

三、弹框

1. 警示框、提示框 (带提示信息和确定按钮)

   alert(提示信息)

2. 确认提示框(带提示信息和确定、取消按钮)

   confirm(提示信息) - 如果选的是确定返回值是true, 否则是false

3. 带输入框的提示框(带提示信息、输入框、确定按钮和取消按钮)

   prompt(提示信息) - 如果点击的是取消，返回值是null；如果点击的是确定，返回值就是输入框中输入的内容

四、定时操作

1. 定时相关的方法

   1)setInterval()/clearInterval()

       setInterval(函数, 定时时间) - 每隔指定时间(单位: 毫秒, 1000毫秒 == 1秒)就调用一次指定函数。会返回一个定时器对象

       clearInterval(定时器) - 关闭指定定时器

   2)setTimeout()/clearTimeout()

       setTimeout(函数, 定时时间) - 到指定时间后调用指定函数(函数只调用一次)

       clearTimeout(定时器) - 关闭指定定时器

注意: 这两种保存定时器对象的时候需要使用全局变量, 这两种的定时器和清除定时器要对应使用.

五、事件绑定

1. 事件绑定 - 在事件源上绑定指定事件对应的驱动程序

   xxx发生了xx就做xx -> 遇到这样的情况就需要做事件绑定

   ‘事件源’发生了’事件’就做’事件驱动程序’

2. 怎么给事件源绑定事件

   a. 在事件源对应的标签的事件属性中调用事件驱动程序对应的函数(事件驱动程序中的this是window)

   b.给事件源节点的事件属性赋值为驱动程序对应的函数(事件驱动程序中的this是事件源)