Events in ES6

Events in ES6

The events can be defined as the actions or the occurrence of an action that is perceived by the software.

The event is used to handle the interaction between JavaScript and HTML. The event occurs when a developer or the browser manipulates the web page. An event can be triggered by a developer or a computer system. It is also considered as a part of the Document Object Model (DOM) Level 3.

The events occur when any interaction is needed on a web page. In the program source code, the HTML code consists of a set of events that can trigger the JavaScript code. We have some common examples of events which are-

a web page loading, clicking on a button, click on a hyperlink, etc.

Event Handler

When an event occurs, the application or software release a group of tasks, the code block accomplishes this task, known as event handler. The HTML elements have a group of events correlated with it. The event handler is used to determine the processing of events in JavaScript.

Here, we have some most common events used in HTML language. They are-

onsubmit Event type

This event occurs when we are going to submit a form. The onsubmit event invokes the related return function (). It also gets the return value(true or false)from the function (). If we get true, then the form will be submitted otherwise not.

Example

Here, we have an example to understand the above event.

<html>
<head>
<script type = "text/javascript"> 
function validation()
{ 
all validation goes here 
return either true or false 
}  
      </script>
      </head>
      <body>
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         . . . . . . . 
       <input type = "submit" value = "Submit" />
       </form>
       </body>
       </html>

Output

After the execution of the above example, we got the following output:

Events in ES6

onclick Event type

The onclick event is the most commonly used event type, triggered when we click on a button. This event type is used to display validation, warning, etc. The onclick event invokes the correlated function when we click.

Example

Here, we have example to elaborate the onclick event.

<html>  
<head>  
      <script type = "text/javascript">   
       function hello() {   
       alert ("Welcome to ES6");   
  }    
</script>
</head>  
<body style="text-align:center;">
<p> Click the button</p>  
<input type = "button" onclick = "hello()" value = "Click me " />  
</body>  
</html>

Output

After the execution of the above code, we got the following output:

Events in ES6

After the clicking on the button, we got the following output:

Events in ES6

onmouseout and onmouseover Event type

These events are used to generate effects with images and text. The onmouseover event triggers when the user moves the mouse pointer out from the item. The onmouseout event triggers if the user put the mouse pointer on the elements.

Example

Here, we have an example to understand the above event.

<html>    
<head>  
<script type="text/javascript">  
function mouseOver() {  
document.getElementById("div1").style.color  
                            = "blue";  
document.getElementById("div2").innerHTML = "mouseOver triggered";          
document.getElementById("div2").style.color  
                            = "red";  
  }  
     function mouseOut() {  
     document.getElementById("div1").style.color = "brown";  
     document.getElementById("div2").innerHTML = "mouseOut triggered";  
     document.getElementById("div2").style.color  
                            = "blue";  
} 
</script>  
</head>
<body style="text-align:center;">
<h1 id="div1" onmouseover="mouseOver()" 
                onmouseout="mouseOut()">  
        Bring your cursor here. 
</h1>
 <h3>  
        Move the cursor on the above line. 
</h3>   
<h2><p id="div2"></p></h2>  
</body>  
</html>  

Output

After the successful execution of the code, we got the following output:

Events in ES6

If we bring the mouse pointer over the first heading, then we will get the following output.

Events in ES6

Standard Events in HTML5

             Sr. No.          Events         Description
                  1.            OfflineThis event triggers if the document is offline.
                  2.            OnabortIt triggers when an event aborts.
                  3.       onbeforeonloadThis event triggers before the document loading.
                  4.         onafterprintIt triggers after the document printing.
                  5.         onbeforeprintThis event triggers before the document printing.
                  6.           OnchangeThis event triggers during the element modification.
                  7.            OnblurIt triggers if we have lost focused window.
                  8.             OnclickThis event triggers when we click the mouse.
                  9.            oncanplayIt triggers if the media play starts.
                 10.        oncontextmenuThis event triggers at the time of context menu starts.
                 11.          OndbclickIt triggers when we double click the mouse.
                 12.   oncanplaythroughIt triggers until the media play ends without containing the stop or buffering.
                 13.           ondropThis event triggers if we have a drag drop element.
                 14.           ondragIt triggers if we have a dragged element.
                 15.        ondragenterThis event trigger when the element dragged to drop destination.
                 16.         ondragendIt triggers at the ending of the drag process.
                 17.       ondragoverThis event triggers if we drag an element over to drop the destination.
                 18.        ondragleaveIt triggers if the element leaves the drop destination.
                 19.    ondurationchangeThis event is used to trigger if the media length change.
                 20.      ondragstartIt triggers at the starting of a drag process.
                 21.       onemptiedThis event triggers if the media resource element becomes empty.
                 22.         onendedIt triggers when the media is going to end.
                 23.         onerrorIt triggers at the time of error arising.
                 24.         onfocusIt triggers when the window gets focus.
                 25.       onforminputIt triggers when the form takes the input from the user.
                 26.       onformchangeThis event triggers when the form changes.
                 27.         oninputIt triggers when the element takes input from the user side.
                 28.         onhaschangeThis event triggers at the time of document modification.
                 29.           onkeyupIt triggers on the release of the key.
                 30.           oninvalidThis event triggers if the element is invalid.
                 31.           onkeypressIt triggers at the time of releasing and pressing of the key.
                 32.           onkeydownIt triggers when the key is only pressed.
                 33.            onloadThis event triggers at the time of document loading.
                 34.       onloadeddataIt triggers when the media data gets loaded.
                 35.   onloadedmetadataIt triggers when the media data and duration (media element) is loaded.
                 36.       onloadstartIt triggers if the browser starts the loading of media data.
                 37.        onmessageIt triggers when we get the message.
                 38.      onmousedownThis event triggers when the mouse button gets pressed.
                 39.      onmousemoveIt triggers on the mouse pointer moving.
                 40.       onmouseoutIt triggers if the mouse pointer moves out of an element.
                 41.      onmouseoverThis event triggers if the mouse pointer moves over an element.
                 42.       onmousewheelIt triggers when the mouse wheel is being rotated.
                 43.        onmouseupThis event triggers when the mouse button is released.
                 44.            onofflineIt triggers when the document is offline.
                 45.            ononlineIt triggers when the document is online.
                 46.         onpagehideThis event triggers when the window gets invisible.
                 47.        onpageshowThis event triggers when the window gets visible to the user.
                 48.         onplayingIt triggers when media data starts playing.
                 49.           onplayThis event triggers when the media data is going to starts playing.
                 50.        onprogressIt triggers if the browser fetching the media data.
                 51.        onpauseThis event triggers when the media data is paused.
                 52.     onratechangeThis event triggers when the media data playing rate is being changed.
                 53.      onpopstateIt triggers if the window history changes.
                 54.        onredoThis event triggers if any document performs the redo operation.
                 55. onreadystatechangeIt triggers when we get a modification in the ready-state.
                 56.          onscrollThis event triggers if the element’s scrollbar scrolls.
                 57.          onresizeIt triggers if the window size is being changed.
                 58.         onseekedIt triggers when the media element’s seeking attribute is false, and the seeking has finished.
                 59.         onseekingIt triggers when the media element’s seeking attribute is true, and the seeking has started.
                 60.         onstalledThis event triggers when an error occurs in media data fetching.
                 61.          onselectIt triggers if we select the element.
                 62.         onstorageIt triggers during the document loading.
                 63.         onsubmitIt triggers when the form is being submitted.
                 64.         onwaitingThis event triggers if the playing of media has stopped, but it will be expected to restart.
                 65.    onvolumechangeThis event triggers when the media volume is being changed or muted.
                 66.          onundoThis event triggers if any document performs the undo operation.
                 67.         onunloadIt triggers when the document is discarded by the user.
                 68.        onsuspendIt triggers when the browser fetching the media file and stopped in between, and the total data is not fetched.
                 69.      ontimeupdateThis event triggers when the media’s playing position is being changed.