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
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