跳至主要內容

事件和队列

Yang大约 3 分钟JavaScript

浏览器维护着一个事件队列,在幕后,浏览器不断的从这个队列中取出事件,并调用相应的事件处理程序来处理他们

  • 浏览器遍历队列,按先后顺序 逐个处理事件

事件

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

上次编辑于:
贡献者: sunzhenyang