ES6 Events

The interaction of JavaScript with HTML is handled through the events that occur when the browser or the user manipulates the page. Events are the occurrences or actions that are recognized by the software. A system or user can trigger them.

Events can be stated as a part of the DOM (Document Object Model) level 3. They occur when some kind of interaction takes place on a web page. Every HTML elements contain a collection of events that can trigger the code of JavaScript. Some of the common examples of events include clicking on a button, clicking on a hyperlink, loading a webpage, etc.

Event Handlers

To react to events, you can assign a handler (a function which runs in case of an event occurs). The event handler can be defined as a block of code that gets executed on the occurrence of an event. We can define the processing of events in JavaScript by using the event handlers.

Let us try to understand the most commonly used events of HTML.

onclick Event type

It is one of the most frequently used event types that gets activated when the user clicks on a button. In this event type, we can put a warning, validation, etc. With a click, the 'onclick' calls the corresponding function() assigned to it.

Let's understand it with an example.

Example

snippet

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

When you execute the above code in the browser, you will get the following output.

Output

After clicking the button, you will get an alert, as shown below.

onsubmit Event type

It occurs when you require to submit a form. When you click on the submit button, then the 'onsubmit' calls the corresponding 'return function()' and takes the response from the function() either in true or false. If the function() returns true, the form will be submitted. Otherwise, it will not submit the data.

onmouseout and onmouseover

These events help you to create effects with the text and images. As the name implies, the onmouseover event triggers when you bring the mouse over any element. The onmouseout event triggers when you move the mouse out from the element.

Let us try to understand them by using the following example.

Example

snippet

<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 
                            = "green"; 
        } 
        function mouseOut() { 
            document.getElementById("div1").style.color 
                            = "magenta"; 
   
            document.getElementById("div2").innerHTML 
                            = "mouseOut triggered"; 
            
            document.getElementById("div2").style.color 
                            = "red"; 
                        } 
    </script> 
</head> 

<body style="text-align:center;"> 
      
    <h1 id="div1" onmouseover="mouseOver()"
                onmouseout="mouseOut()"> 
        Bring your mouse inside it. 
    </h1> 
          
    <h3> 
        Move your cursor on the above heading to see the result.
    </h3> 
          
    <h2><p id="div2"></p></h2> 
</body> 
  
</html>

When you execute the above code in the browser, you will get the following output.

Output

Move your mouse over the first heading, and you will get:

Move your mouse out from the first heading, and you will get:

HTML5 Standard events

There are some of the commonly used HTML events that are listed in the following table.

Attributes	Description
onabort	It triggers on the abort event.
offline	It gets trigger when the document goes offline.
onafterprint	It triggers after the printing of the document.
onbeforeonload	It triggers before the loading of the document.
onbeforeprint	It triggers before the printing of the document.
onblur	It triggers when the window loses the focus.
onchange	It triggers when the element changes.
onclick	It triggers when the mouse clicks.
oncontextmenu	It triggers when the context menu gets triggered.
oncanplay	It triggers when the media can start play.
oncanplaythrough	It triggers when media plays till the end without any buffering or stopping.
ondbclick	It triggers on the double-click of a mouse.
ondrag	It triggers when the element is dragged.
ondrop	It triggers when a dragged element is dropped.
ondragend	It triggers when the drag operation gets end.
ondragenter	It triggers when the element has dragged to drop target.
ondragleave	It triggers when an element leaves a drop target.
ondragover	It triggers when the element is being dragged over a drop target.
ondragstart	It triggers at the starting of a drag operation.
ondurationchange	It triggers when the media length is changed.
onended	It triggers when the media reached the end.
omemptied	It triggers when the resource element in media suddenly gets empty.
onfocus	It triggers when the window gets focus.
onerror	It triggers at the occurring of an error.
onformchange	It triggers when the form gets change.
onforminput	It triggers when the form gets input from the user.
onhaschange	It triggers at the changing of a document.
oninput	It triggers when the element gets input from the user.
oninvalid	It triggers on an invalid element.
onkeyup	It triggers when the key is released.
onkeydown	It triggers when the key is pressed.
onkeypress	It triggers when the key is released and pressed.
onload	It triggers at the loading of the document.
onloadedmetadata	It triggers when the media data and duration of the media element is loaded.
onloadeddata	It triggers when the data of media is loaded.
onmessage	It triggers at the triggering of the message.
onloadstart	It triggers when the browser starts the loading of media data.
onmousemove	It triggers at the moving of the mouse pointer.
onmousedown	It triggers at the pressing of the mouse button.
onmouseover	It triggers when you move the mouse pointer over an element.
onmouseout	It triggers when the mouse pointer moves out from the element.
onmouseup	It triggers at the release of a mouse button.
onmousewheel	It triggers when you rotate the wheel of the mouse.
ononline	It triggers when the document is online.
onoffline	It triggers when the document is offline.
onpageshow	It triggers when the window gets visible.
onpagehide	It triggers when the window is hidden.
onplay	It triggers when the media data is going to start playing.
onplaying	It triggers when the media data is playing.
onpause	It triggers when the media data is paused.
onprogress	It triggers when the browser fetches the media data.
onpopstate	It triggers when the history of window changes.
onratechange	It triggers when the playing rate of media data is changed.
onreadystatechange	It triggers when the ready-state changes.
onredo	It triggers when there is a redo operation is performing by the document.
onresize	It triggers when the window gets resized.
onscroll	It triggers when the scrollbar of an element is being scrolled.
onseeking	It triggers when the seeking attribute of media element is true, and the seeking has begun.
onseeked	It triggers when the seeking attribute of media element is not true, and the seeking has ended.
onselect	It triggers when the element gets selected.
onstalled	It triggers when there is an error in the fetching of media data.
onsubmit	It triggers when the form gets submitted.
onstorage	It triggers when the document loads.
onvolumechange	It triggers when the media element changes its volume or when the volume is on mute.
onwaiting	It triggers when the media element has stopped playing, but it is expected to resume.
onunload	It triggers when a user leaves the document.
onundo	It triggers when the document performs the undo operation.
ontimeupdate	It triggers when the playing position of media element changes.
onsuspend	It triggers when the browser is fetching the media data but stopped before the complete media file was fetched.