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

ES6 Events

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

ES6 Events

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

ES6 Events

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

ES6 Events

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

ES6 Events

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.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +