8/01/2018

Javascript Events Tutorial with Complete List of Events

Events in JavaScript, When User or browser tries to manipulate pages then events occurred to handle the JavaScript’s interaction with HTML. As we know, JavaScript works with HTML, So, Everything that happens with pages loading, clicking a button, minimizing the window, click to mouse etc. all are the events. Like if we display any message to the user on a button click, this happens through the events. there are many things you need to study before reading javascript Events. You must know about Functions in Javascript.

All HTML elements like button, textbox, images can contain events that can be triggered using JavaScript code. And all these events are the part of DOM(Document Object Model). Here we will discuss some most frequent Events used in JavaScript:

Table of Content


  • Events in Javascript
  • Event list in JS Graphical 
  • Onclick Event in Javascript
  • OnMouseOver in Javascript
  • Example of Events
  • List of Event in Javascript
  • Keyboard Event operation perform
  • Event Listeners Flow
  • Author

Mouse and Keyboard Javascript Event Listeners list

Onclick Event


OnClick Event occurs when a left mouse button is clicked, Like if you want to show any message or warning or data validation or something on button click you can do using Onclick event. As we display a message box in the example:

Example

<html>
   <head>   
      <script type="text/javascript">     
            function Welcome() {
               alert("Welcome to Programming With Basics")
            }
      </script>   
   </head>
   <body>
      <form>
        <input type="button" onclick="Welcome()" value="Welcome to PWB"/>
      </form>   
   </body>
</html>

OnMouseOver :


Onmouseover event triggers when the mouse comes over the element contains the mouseover event. For example, if you want to highlight or want to change the color of the text when the mouse comes over the element then this event is used.

Example:

<html>
   <head>
      <script type="text/javascript">     
            function over() {
            var x = document.getElementById("div1");
            x.style.color = 'red';
            }     
      </script>   
   </head>
   <body>
      <div id="div1" onmouseover="mouseover()">
         <h2> Mouse Over </h2>
      </div>     
   </body>
</html>

Read: How Controls Flow Works in Javascript.

Keyboard Event and Mouse Events: You can perform keyboard events test bt visiting a https://www.w3.org/2002/09/tests/keys-cancel2.html or you can also check how many keyboard or mouse events are active in a webpage for more information check below picture.

javascript Keyboard listener properties

Press Ctrl + Shift + I or right click of any webpage click to the event listener, you will see a list of event listeners available for the web page. See the event listener in hacker rank programming solutions for day 8.

hackerrank solution event listeners list on browser

Below is the list of above-defined events, there are many more events in JavaScript:



EventDescription
onclickTriggers on mouse click.
OfflineTriggers when the document goes offline
onblurTriggers when the window loses focus
oncanplayTriggers when media can start play, but might has to stop for buffering
OnabortTriggers on an abort event
onafterprintTriggers after the document is printed
onbeforeprintTriggers before the document is printed
oncanplayTriggers when media can start play, but might has to stop for buffering
onbeforeonloadTriggers before the document loads
oncanplaythroughTriggers when media can be played to the end, without stopping for buffering
oncontextmenuTriggers when a context menu is triggered
onclickTriggers on a mouse click
onchangeTriggers when an element changes
ondblclickTriggers on a mouse double-click
ondragoverTriggers at the start of a drag operation
ondragleaveTriggers when an element is being dragged over a valid drop target
ondragenterTriggers when an element has been dragged to a valid drop target
ondragendTriggers at the end of a drag operation
ondragTriggers when an element is dragged
onendedTriggers when media has reach the end
onemptiedTriggers when a media resource element suddenly becomes empty.
ondurationchangeTriggers when the length of the media is changed
ondragstartTriggers at the start of a drag operation
ondropTriggers when dragged element is being dropped
onerrorTriggers when an error occur
onformchangeTriggers when a form changes
onfocusTriggers when the window gets focus
onforminputTriggers when a form gets user input
oninvalidTriggers when an element is invalid
oninputTriggers when an element gets user input
onhaschangeTriggers when the document has change
onkeypressTriggers when a key is pressed and released
oninvalidTriggers when an element is invalid
onkeydownTriggers when a key is pressed
onloadeddataTriggers when media data is loaded
onkeydownTriggers when a key is pressed
onkeyupTriggers when a key is released
onloadeddataTriggers when media data is loaded
onmouseoutTriggers when the mouse pointer moves out of an element
onmousedownTriggers when a mouse button is pressed
onmousemoveTriggers when the mouse pointer moves
onmessageTriggers when the message is triggered
onloadstartTriggers when the browser starts to load the media data
onmouseupTriggers when a mouse button is released
onplayingTriggers when media data has start playing
onmousewheelTriggers when the mouse wheel is being rotated
onoineTriggers when the document comes online
onofflineTriggers when the document goes offline
onpagehideTriggers when the window is hidden
onpageshowTriggers when the window becomes visible
onpauseTriggers when media data is paused
onplayingTriggers when media data has start playing
onplayTriggers when media data is going to start playing
onpopstateTriggers when the window's history changes
onratechangeTriggers when the media data's playing rate has changed
onprogressTriggers when the browser is fetching the media data
onreadystatechangeTriggers when the ready-state changes
onstorageTriggers when a document loads
onstalledTriggers when there is an error in fetching media data
onseekingTriggers when a media element's seeking attribute is true, and the seeking has begun
onscrollTriggers when an element's scrollbar is being scrolled
onseeked
Triggers when a media element's seeking attribute is no longer true, and the seeking has ended
onresizeTriggers when the window is resized
onredoTriggers when the document performs a redo
onsuspend
Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
onundoTriggers when a document performs an undo
onwaitingTriggers when media has stopped playing, but is expected to resume
ontimeupdateTriggers when media changes its playing position
onvolumechangeTriggers when media changes the volume, also when the volume is set to mute

Event Listeners Flow:


Check the Event Listener Propagations, How Events work when opening a webpage when we click on a button, link etc.

Flow of Mouse Event Listener in Javascript

Author


This in-depth article of Event in JavaScript is written by Suman Yadav.  You can also write to us, Submit your article and be a member of our A Programming Solutions Blog. Join us by sending a well-written article for more information visit Write for Us.

No comments:

Post a Comment