Skip to content

Introduction to event in JavaScript

homepage-banner

Event Invocation Method

  1. Call in js tag
  2. 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

Form Event

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

Media Event

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