事件和队列
浏览器维护着一个事件队列,在幕后,浏览器不断的从这个队列中取出事件,并调用相应的事件处理程序来处理他们
- 浏览器遍历队列,按先后顺序 逐个处理事件
事件
onload
浏览器加载网页完毕后触发
onunload
用户关闭浏览器窗口或切换到其他网页时触发
onresize
用户调整浏览器窗口大小时触发
dragstart
用户拖曳网页中元素时触发
drop
用户放下拖曳的元素时触发
onclick
元素单击时触发
onmousemove
当鼠标在特定元素上移动时触发
onmouseover
当鼠标移入指定元素时触发
onmouseout
当鼠标移除指定元素时触发
ontouchstart
在触摸设备上,用户触摸并按住元素时触发
ontouchend
在触摸设备上,用户停止触摸时触发
ontouchstart
在触摸设备上,用户触摸并按住元素时触发
onkeyup
用户放开任何先前按下的键时触发
onkeydown
用户按下任何键(包括系统按钮,如箭头键和功能键)时触发
onkeypress
用户按下并放开任何字母数字键时触发,系统按钮(例如,箭头键和功能键)无法识别
onplay
用户单击网页中 video 元素的播放按钮时触发
Pause
用户单击网页中 video 元素的暂停按钮时触发
鼠标位置
pageX
鼠标位置相对于网页左边缘的距离(像素),会被滚动条影响变化
pageY
鼠标位置相对于网页上边缘的距离(像素)
clientX
鼠标位置相对于浏览器窗口左边缘的距离(像素)
clientY
鼠标位置相对于浏览器窗口上边缘的距离(像素)
screenX
鼠标位置相对于设备屏幕左边缘的距离(像素)
screenY
鼠标位置相对于设备屏幕上边缘的距离(像素)
movementX
当前事件和上一个
mousemove
事件之间鼠标在水平方向上的移动值
movementY
当前事件和上一个
mousemove
事件之间鼠标在垂直方向上的移动值
元素距离
offsetTop / offsetLeft ( 元素与父级 定位元素/table/td/th/body 的距离 )
clientTop / clientLeft ( 元素边框宽度 )
scrollTop / scrollLeft ( 元素滚动距离 )
window.scrollY / window.scrollX ( 文档/页面 滚动距离 ) window.pageYOffset / window.pageXOffset ( 另一种写法 -跨浏览器兼容- )
window.screenTop / window.screenLeft ( 浏览器边界到操作系统桌面的距离 ) window.screenY / window.screenX ( 另一种写法 )
---------------- / ---------------
offsetWidth / offsetHeight ( 元素的布局宽高度 -整数-)
clientWidth / clientHeight ( 元素的 内部/视口 宽高度 -整数-)
scrollWidth / scrollHeight ( 元素的内部宽高度 -整数-)
window.innerWidth / window.innerHeight ( 窗口的内部宽高度 )
window.outerWidth / window.outerHeight ( 窗口整体宽高度 )
screen.width / screen.height ( 屏幕宽高度 )
screen.availwidth / screen.availheight ( 浏览器在屏幕中能占用的最大宽高度 )
---------------- / ---------------
getBoundingClientRect( ) ( 元素的大小及其相对于视口的各种距离的集合)
innerWidth innerHeight