事件BOM DOM

1.事件

1.1 事件绑定

# 1.写在html元素中
<button onclick='code'></button>

# 2.把事件当作元素对象的方法
btnEle.onclick=function(){
    code...
}

# 3.事件监听
btnEle.addEventListener('click',function(){

},false)    false表示冒泡阶段触发(默认)

1.2 事件的捕获和冒泡

捕获阶段：从祖元素到子元素
冒泡阶段：从子元素到祖元素
事件默认在冒泡阶段触发

1.3 常用事件

# 鼠标事件
click                   单击
dblclick                双击
contextmenu             右击
mouseover/mouseenter    鼠标悬停
mouseout/mouseleave     鼠标离开
mousedown               鼠标按下
mouseup                 鼠标抬起
mousemove               鼠标移动

# 键盘事件
keydown                 键盘按键按下
keyup                   键盘按键抬起
keypress                按键按下，只有可输入的按键才能触发

# 表单事件
blur                    失去焦点
focus                   获得焦点
submit                  提交 绑定给form元素
reset                   重置 绑定给form元素
select                  输入框内容被选中
change                  内容改变且失去焦点  适合select选项更改，触发
input                   输出内容改变 触发

# 文档事件
load                    绑定给body 绑定给window 绑定给 img 、link、script   文档加载完成
unload                  文档关闭
beforeunload            文档关闭之前

# 图片事件
load                    图片加载完毕
error                   图片加载错误
abort                   图片加载中断

# 其他事件
scroll                  滚动
resize                  大小调整

1.4 Event对象 事件对象

属性
clientX             鼠标的坐标
clientY             鼠标的坐标
keyCode             键盘的按键  ascii码
button              鼠标按键    0 1 2
target              返回元素  具体触发的元素

方法
stopPropagation()   阻止事件冒泡
preventDefault()    阻止元素的默认事件

2.BOM浏览器对象模型

2.1 window

# 属性
window.innerWidth   窗口的宽
window.innerHeight  窗口的高
history
location
screen
navigator

# 方法
setInterval()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()
...

2.2 history

属性
length

方法
back()      退后一步
forward()   前进一步
go()        前进/后退n步

2.3 location

属性
href        地址
protocol    协议
host        主机名和端口
hostname    主机名
port        端口
pathname    路径名
search      url中？后面
hash        锚点

2.4 screen

屏幕

2.5 navigator

userAgent   查看用的是什么浏览器

3. DOM文档对象模型

3.1 常见的dom对象

所有的元素对象 都是dom
document                    表示整个文档
document.body               获取body元素
document.documentElement    获取HTML元素

3.2 元素内容

innerHTML
innerText