鼠标事件
click : 鼠标单击 时触发
dblclick : 鼠标双击 时触发
mousemove : 鼠标移动 时触发
mouseenter/mouseover : 鼠标经过 时触发
mouseleave/mouseout : 鼠标离开 时触发
其中mouseenter 和 mouseleave 不支持冒泡 (推荐使用)
mouseover 和 mouseout 支持冒泡
焦点事件
focus : 获得焦点 时触发
blus : 失去焦点 时触发
文本事件
input : (主要是表单)输入时触发
键盘事件
keydown : 按下键盘时触发
keyup : 键盘弹起时触发
页面加载事件
load : 当资源加载完毕执行的事件
- 监听页面所有资源加载完毕 : 给 window 添加 load 事件
window.addEventListener('load',函数)
- 监听页面DOM加载完毕 : 给 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded',函数)
- 监听页面某个资源(例如:图片)加载完毕 :
document.addEventListener('load',函数)
- 应用场景: 当script标签写在前面,由于代码从上往下执行,此时会导致js获取不到元素,这时就要给给 window添加load事件
元素滚动事件
scroll : 滚动条滚动时触发(谁有滚动条给谁添加该事件)
注意点 :
-
如果浏览器窗口有滚动条就给window加scroll,此时scrollTop是html的值(兼容性问题,有些浏览器scrollTop是body的值).
-
如果没有书写代码时没有写
<!DOCTYPE html>,此时的scrollTop是body的值 -
scrollTop : 获取滚动位置,可以获取也可以重新赋值
-
元素.scrollTo(x,y) 滚动到具体位置
页面尺寸事件
resize : 当窗口的大小发生改变时触发
获取元素位置
移动端touch触屏事件
touchstart : 触摸
touchend : 离开
touchmove : 移动
播放事件
audio标签
play : 播放事件
pause : 暂停事件
change事件
change : 当文本框（input或textarea）内容改变且失去焦点后触发
