events in js
mouse event
onclick |
click trigger |
ondblclick |
double click |
onmouseenter |
move to |
onmouseleave |
move out |
onmouseover |
move to (including child elements) |
onmouseout |
move away (including child elements) |
onmousemove |
move |
context menu |
right click |
onmousedown |
press |
onmouseup |
release |
keyboard events
onkeydown |
press |
onkeypress |
press and release |
onkeyup |
release |
form event
onblur |
lose focus |
onfocus |
gain focus |
onchange |
when content changes |
oninput |
enter |
onreset |
reset |
onsubmit |
submit |
drag event
unbearable |
drag |
uncaring |
finished dragging |
onbearer |
When dragging an element into the target |
ondragleave |
When dragging an element away from the target |
ondragover |
When dragging an element onto the drop target |
ondrop |
When dragging an element to drop the target area |
contract start |
when starting to drag the element |
clipboard event
oncopy |
copy |
uncut |
to cut |
onpaste |
paste |
print event
onafterprint |
Printing has already started, or the print window has been closed |
onbeforeprint |
when printing is about to start |
Frame/Object Events
onload |
page loaded |
onscroll |
when scrolling |
onresize |
window resize |
onpagehide |
When jumping to the page |
onerror |
When there is an error loading a document or image |
onunload |
exit page |
multimedia event
on pause |
pause |
onplay |
Start playing |
animation event
animationend |
When the CSS animation finishes playing |
animationiteration |
When CSS animation repeats |
animationstart |
When the CSS animation starts playing |
events in jquery
Remove "on" and add "()" parentheses to encapsulate js properties into methods. One event was different.
load event
ready() |
区别于 onload .该方法无需加载图片或视频。 |
绑定事件与移除事件
on()方法可以为指定元素添加多个事件。
元素.on("事件类型1 事件类型2",function(){})
元素.on({事件类型1:function(){},事件类型2:(){}})
off()方法可以从指定元素上移除多个事件。
元素.off(事件类型)
复合事件
hover()方法用于模拟鼠标指针进入和离开事件,相当于mouseenter和mouseleave事件的组合。
本章总结
苟有恒,何必三更眠五更起;最无益,莫过一日曝十日寒。 ——胡居仁