JavaScript Event and Function Reference Guide
JavaScript events are actions that can be detected by the browser or web page. They can be used to trigger functions and update elements on the page based on user interactions or other events.Here is a list of some common JavaScript events:1. click - The user clicks on an element2. blur - An element loses focus3. focus - An element gains focus4. mouseover - The user's mouse moves over an element5. mouseout - The user's mouse leaves an element6. keydown - The user presses a keyboard key7. keyup - The user releases a keyboard key8. load - The document or image has finished loading9. submit - A form is submitted10. resize - The browser window is resized11. scroll - The user scrolls the pageThese events can be used to create interactive and dynamic websites. For example, a click event could be used to toggle a dropdown menu or expand a section of content. The keydown event could be used to trigger a search function when the user types in a search query. The possibilities are endless!
General events 10 types in total
| Event | Browser support | Explanation |
|---|---|---|
| onclick | IE3, N2 | This event is triggered when the mouse is clicked |
| ondblclick | IE4、N4 | This event is triggered when the mouse is double-clicked |
| onmousedown | IE4、N4 | This event is triggered when the mouse is pressed |
| onmouseup | IE4、N4 | This event is triggered when the mouse is released after being pressed |
| onmouseover | IE3、N2 | This event is triggered when the mouse moves above the range of an object |
| onmousemove | IE4、N4 | This event is triggered when the mouse moves |
| onmouseout | IE4、N3 | This event is triggered when the mouse leaves the range of an object |
| onkeypress | IE4、N4 | This event is triggered when a key on the keyboard is pressed and released. |
| onkeydown | IE4、N4 | This event is triggered when a key on the keyboard is pressed |
| onkeyup | IE4、N4 | This event is triggered when a key on the keyboard is pressed and released |
Page related events A total of 9 types
| Event | Browser support | Explanation |
|---|---|---|
| onabort | IE4, N3 | The image was interrupted by the user while downloading |
| onbeforeunload | IE4, N | This event is triggered when the content of the current page is about to be changed |
| onerror | IE4, N3 | This event is triggered when an error occurs |
| onload | IE3, N2 | This event is triggered when the page content is completed |
| onmove | IE, N4 | This event is triggered when the browser window is moved |
| onresize | IE4, N4 | This event is triggered when the browser window size is changed |
| onscroll | IE4、N | This event is triggered when the scroll bar position of the browser changes |
| onstop | IE5、N | This event is triggered when the browser's stop button is pressed or the file being downloaded is interrupted |
| onunload | IE3、N2 | This event is triggered when the current page will be changed |
Form-related events 5 types in total
| Event | Browser support | Explanation |
|---|---|---|
| onblur | IE3, N2 | This event is triggered when the current element loses focus |
| onchange | IE3, N2 | This event is triggered when the current element loses focus and the content of the element changes |
| onfocus | IE3, N2 | This event is triggered when an element gains focus |
| onreset | IE4, N3 | This event is triggered when the RESET attribute in the form is activated |
| onsubmit | IE3, N2 | This event is triggered when a form is submitted |
Scrolling subtitle event 3 types in total
| Event | Browser support | Explanation |
|---|---|---|
| onbounce | IE4、N | This event is triggered when the content in the Marquee moves outside the Marquee display range |
| onfinish | IE4、N | This event is triggered when the Marquee element completes the content to be displayed |
| onstart | IE4, N | This event is triggered when the Marquee element starts to display content |
Editing events 20 in total
| Event | Browser support | Explanation |
|---|---|---|
| onbeforecopy | IE5, N | This event is triggered before the currently selected content of the page is copied to the browser's system clipboard |
| onbeforecut | IE5, N | This event is triggered when part or all of the content in the page is to be removed from the current page [clip] and moved to the browser's system clipboard |
| onbeforeeditfocus | IE5、N | The current element is about to enter the editing state |
| onbeforepaste | IE5、 N | This event is triggered when the content is about to be transferred [pasted] from the browser's system clipboard to the page |
| onbeforeupdate | IE5, N | Notify the target object when the browser pastes the content in the system clipboard |
| oncontextmenu | IE5, N | The event triggered when the browser presses the right mouse button to display the menu or triggers the page menu through the keyboard key |
| oncopy | IE5、N | This event is triggered when the current selected content of the page is copied |
| oncut | IE5、N | This event is triggered when the current selected content of the page is cut |
| ondrag | IE5、N | This event is triggered when an object is dragged [Active Event] |
| ondragdrop | IE, N4 | An external object is dragged into the current window or frame by the mouse |
| ondragend | IE5, N | This event is triggered when the mouse drag ends, that is, the mouse button is released |
| ondragenter | IE5、N | This event is triggered when the object dragged by the mouse enters the scope of its container |
| ondragleave | IE5、N | This event is triggered when the object dragged by the mouse leaves the scope of its container |
| ondragover | IE5、N | This event is triggered when a dragged object is dragged within the scope of another object container |
| ondragstart | IE4、N | This event is triggered when an object is about to be dragged |
| ondrop | IE5、N | This event is triggered when the mouse button is released during a drag process |
| onlosecapture | IE5, N | This event is triggered when the element loses the selection focus formed by the mouse movement |
| onpaste | IE5, N | This event is triggered when the content is pasted |
| onselect | IE4, N | Event when text content is selected |
| onselectstart | IE4, N | Event triggered when text content selection begins |
Data binding 10 types in total
| Event | Browser support | Explanation |
|---|---|---|
| onafterupdate | IE4, N | This event is triggered when the data is transferred from the data source to the object |
| oncellchange | IE5, N | When the data source changes |
| ondataavailable | IE4、N | When data reception is completed, the event is triggered |
| ondatasetchanged | IE4、N | The event is triggered when the data source changes |
| ondatasetcomplete | IE4、N | This event is triggered when all valid data from the sub-data source is read |
| onerrorupdate | IE4, N | When the onBeforeUpdate event is used to trigger the cancellation of data transmission, it replaces the onAfterUpdate event |
| onrowenter | IE5, N | The event triggered when the data of the current data source changes and there is new valid data |
| onrowexit | IE5、N | Event triggered when the data of the current data source is about to change |
| onrowsdelete | IE5、N | This event is triggered when the current data record is about to be deleted |
| onrowsinserted | IE5、N | This event is triggered when the current data source is about to insert a new data record |
External events A total of 6 types
| Event | Browser support | Explanation |
|---|---|---|
| onafterprint | IE5, N | This event is triggered when the document is printed |
| onbeforeprint | IE5, N | This event is triggered when the document is about to be printed |
| onfilterchange | IE4, N | Event triggered when the filter effect of an object changes |
| onhelp | IE4, N | This event is triggered when the viewer presses F1 or the browser's help selection |
| onpropertychange | IE5, N | This event is triggered when one of the object's properties changes |
| onreadystatechange | IE4, N | This event is triggered when the initialization property value of the object changes |