Basic use of events:
event modifier
mouse event
event | describe |
onclick | Triggered on mouse click |
ondbclick | Triggered when the mouse is double-clicked |
onmousedown | Triggered when the mouse is pressed (just the moment the mouse is pressed) |
onmouseleave | mouseout event |
onmouseover | Triggered when the mouse crosses, passes, and moves in |
onmousemove | Mouse movement refers to triggering when moving (the difference from over is that over is only triggered once when moving in, while move is triggered as long as the mouse moves) |
onmouseout | Triggered when moving away |
context menu | Triggered when the right mouse button menu is expanded. In this event, ev.preventDefault() can prevent the right-click menu from popping up. |
keyboard events
key alias
event | describe |
onkeydown | Triggered when the keyboard is pressed |
onkeyup | Fired when the keyboard is released |
onkeypress | Fires when a keyboard key is pressed or held down |
[Keyboard < character key (except those function keys, such as: Ctrl shift, etc.) > is pressed, and if it is held down, this event will be triggered repeatedly ] |
UI events
event | describe |
window.onload | Executed after page elements (including pictures, multimedia, etc.) are loaded |
window.onscroll | page scroll event |
window.onresize | When the window or frame is resized |
form event
event | describe |
onblur | When focus is lost (form validation is most commonly used) |
onfocus | Fired when focus is gained |
onchange | When content changes and loses focus |
change | state change event |
oninput | when content changes |
onreset | reset button is clicked |
onsubmit | The submit button is clicked |
onselect | input box text is selected |
other events
event | describe |
onabort | Image loading was interrupted |
ondblclick | mouse double click on an object |
onerror | An error occurred while loading the document or image |
onload | A page or image has finished loading |
onmouseup | A mouse button is released |
onreset | reset button is clicked |
onresize | window or frame is resized |
contract start | Fired when the user starts dragging an element |
unbearable | Fired when the element is being dragged |
uncaring | Fired when the user finishes dragging an element |
onbearer | This event is fired when the object being dragged by the mouse enters the bounds of its container |
ondragover | 当被拖动的对象在另一对象容器范围内拖动时触发此事件 |
ondragleave | 当被鼠标拖动的对象离开其容器范围内时触发此事件 |
ondrop | 在一个拖动过程中,释放鼠标键时触发此事件 |