day25-课堂总结

BOM基础

1.什么是BOM - 浏览器对象模型(browser object model)
js中提供了一个全局的window对象，用来表示当前的浏览器
js中声明的全局变量，其实都是绑定在window对象属性中(使用window的属性和方法的时候，前面window可以省略)
2.window基本操作
a.打开新窗口
window.open（url） - 返回一个窗口对象
b.关闭窗口
window.close()
c.移动当前窗口
窗口对象.moveTo(x坐标，y坐标)
d调整窗口大小
窗口对象.resizeTo(x,y)
刷新 - window.reload()
f.获取浏览器的宽度和高度
innerWidth/innerHeight - 浏览器显示内容的部分的宽度和高度
outerWidth/outerHeight - 整个浏览器的宽度和高度
3.弹框
alert(提示信息) - 弹出提示信息（带确认按钮）
confirm(提示信息) - 弹出提示信息(带确认和取消按钮)，返回值是布尔值，取消 - false 确认 - true
c.prompt（提示信息，输入框中的默认值） - 弹出一个带输入框和取消，确认按钮的提示框 - 点取消，返回值是null，点击确认返回的是输入框中输入的内容

定时事件

1.setInterval(函数，时间) - 每隔指定的时间，就执行一次函数，时间单位是毫秒，返回定时对象
clearInterval(定时对象) - 停止指定的定时器
1000毫秒 = 1秒
2.setTimeout(函数，时间) - 隔指定的时间执行函数(只执行一次)
clearTimeout(定时对象) - 停止定时
js是事件驱动语言
1.事件三要素(事件源，事件，事件驱动程序)
2绑定事件
第一步：获取事件源
第二步：绑定事件
第三步：写驱动程序
a.在标签内部给事件源的事件属性赋值
<标签 事件属性='驱动程序'><标签>
<标签 事件属性='函数名()'> <标签> - 一般不这样绑定
注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中的this关键字是window
b.通过节点绑定事件()
标签节点.事件属性 = 函数
注意：这个时候函数中的this是事件源
c.通过节点绑定事件
标签节点.事件属性 = 匿名函数
注意：这个时候函数中this是事件源
d.通过节点绑定事件
标签节点.addEventListener(事件名,函数) - 指定的节点产生指定的事件后调用函数
事件名 - 字符串， 去掉on
注意：这个时候函数中的this是事件源，这种方式可以给同一个节点的同一事件绑定多个驱动程序
3.获取事件对象
当事件的驱动程序是一个函数的时候，函数中可以设置一个参数，来获取当前事件的事件对象
//参数evnet就是事件对象
//a.clientX/clientY - 事件产生的位置的坐标(相对浏览器内容的部分)

常见事件类型

1.onload - 页面加载完成对应的事件
window.onload = 函数
2.鼠标事件
onclick - 点击
onmouseover - 鼠标移入
onmouseout - 鼠标移出
onmousedown - 鼠标按下
onmouseup - 鼠标弹起
3.键盘事件
onkeypress - 按下弹起
键盘事件对象：key属性 - 按键的值， keycode属性 - 按键的编码
onkeydown - 按下
onkeyup - 弹起
4.输入框内容改变
onchange - 输入框输入状态结束