Introduction to event in JavaScript

Event Invocation Method
- Call in js tag
- Call in element
Call in js tag
<html>
<head>
<script>
window.onload = function () {
var Btn = document.getElementById("btn");
Btn.onclick = function () {
alert("xxx");
};
};
</script>
</head>
<body>
<input id="btn" type="button" value="Click" />
</body>
</html>
Call in element
<html>
<head>
<script>
function alertMe(){
alert("xxx");
}
</script>
</head>
<body>
<input type="button" onclick="alertMe()" value="Click" />
</body>
</html>
Event Type
- Mouse Event
- Keyboard Event
- Frame/Object Event
- Form Event
- Clipboard Event
- Drag Event
- Media Event
Mouse Event
onclick // The event handler called when a user clicks an object
oncontextmenu // Triggered when the user clicks the right mouse button to open the context menu
ondblclick // The event handler called when a user double-clicks an object
onmousedown // Mouse button is pressed
onmouseenter // Triggered when the mouse pointer moves over the element
onmouseleave // Triggered when the mouse pointer moves out of the element
onmousemove // Mouse is moving
onmouseover // Mouse moves over an element
onmouseout // Mouse moves away from an element
onmouseup // Mouse button is released
Keyboard Event
onkeydown // A keyboard button is pressed
onkeypress // A keyboard button is pressed and released
onkeyup // A keyboard button is released
Frame/Object Event
onabort // Image loading is interrupted
onbeforeunload // The event is triggered when the user is about to leave the page (refresh or close)
onerror // An error occurred while loading the document or image
onhashchange // The event is triggered when the anchor part of the current URL changes
onload // A page or image has finished loading
onpageshow // The event is triggered when the user visits the page
onpagehide // The event is triggered when the user leaves the current web page and jumps to another page
onresize // The window or frame is resized
onscroll // The event that occurs when the document is scrolled
onunload // The user exits the page
onblur // The element loses focus
onchange // The event is triggered when the content of the form element changes (<input>, <keygen>, <select>, and <textarea>)
onfocus // The element gets focus
onfocusin // The event is triggered when the element is about to get focus
onfocusout // The event is triggered when the element is about to lose focus
oninput // The event is triggered when the element receives user input
onreset // The form is reset
onsearch // The event is triggered when the user enters text in the search field (<input="search">)
onselect // The event is triggered when the user selects text (<input> and <textarea>)
onsubmit // The form is submitted
Clipboard Event
oncopy // The event is triggered when the user copies the element content
oncut // The event is triggered when the user cuts the element content
onpaste // The event is triggered when the user pastes the element content
Drag Event
ondrag // The event is triggered when the element is being dragged
ondragend // The event is triggered when the user completes the drag of the element
ondragenter // The event is triggered when the dragged element enters the drop target
ondragleave // The event is triggered when the dragged element leaves the drop target
ondragover // The event is triggered when the dragged element is on the drop target
ondragstart // The event is triggered when the user starts dragging the element
ondrop // The event is triggered when the dragged element is dropped in the drop target
onabort // The event is triggered when the video/audio is interrupted during loading
oncanplay // The event is triggered when the user can start playing the video/audio
oncanplaythrough // The event is triggered when the video/audio can be played smoothly without pausing and buffering
ondurationchange // The event is triggered when the duration of the video/audio changes
onemptied // The event is triggered when the current playlist is empty
onended // The event is triggered when the video/audio completes playing
onerror // The event is triggered when an error occurs during the loading of video/audio data
onloadeddata // The event is triggered when the browser loads the current frame of the video/audio
onloadedmetadata // The event is triggered after the metadata of the specified video/audio has been loaded
onloadstart // The event is triggered when the browser starts looking for the specified video/audio
onpause // The event is triggered when the video/audio is paused
onplay // The event is triggered when the video/audio starts playing
onplaying // The event is triggered when the video/audio is paused or is ready to resume playing after buffering
onprogress // The event is triggered when the browser downloads the specified video/audio
onratechange // The event is triggered when the playback speed of the video/audio changes
onseeked // The event is triggered when the user repositions the playback position of the video/audio
onseeking // The event is triggered when the user starts to reposition the playback position of the video/audio
onstalled // The event is triggered when the browser gets media data, but the media data is not available
onsuspend // The event is triggered when the browser reads media data and stops
ontimeupdate // The event is triggered when the current playback position changes
onvolumechange // The event is triggered when the volume changes
onwaiting // The event is triggered when the video needs to buffer to play the next frame
Small world. Big idea!
- Welcome to visit the knowledge base of SRE and DevOps!
- License under CC BY-NC 4.0
- No personal information is collected
- Made with Material for MkDocs and generative AI tools
- Copyright issue feedback me#imzye.com, replace # with @
- Get latest SRE news and discuss on Discord Channel