ES6 | Events

The ES6 Events are the part of every HTML element that contains a set of events that can trigger the JavaScript code. An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks, hovers, page loading, etc. All this stuff gets into action(processed) with the help of Event Handlers.

Event handler: Simply, when a mentioned Event occurs it gets Handled. When the event is raised, it gets handled in the form of a set of instructions (function()).

The following are some of the most commonly used HTML events:



onclick: This event gets activated on a click on a button with the help of left-clicking on the mouse. With a click, the “onclick” calls the respective function() assigned to it.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html> 
    <head> 
        <title>
            ES6 Events using onclick
        </title>
          
        <script> 
            function geeks() { 
                document.write ("A Computer"
                + " Science Portal for Geeks"
            
        </script> 
    </head> 
          
    <body style="text-align:center;"
      
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h3> 
            With a click, the “onclick”
            calls geeks()
        </h3>
          
        <input type = "button" onclick =
            "geeks()"   value = "Click here" /> 
    </body> 
      
    </html>

    chevron_right

    
    

  • Output:

onmouseover and onmouseout: These event types will help us create nice effects with images or even with text as well. The “onmouseover” event triggers when you bring your mouse cursor over any element and the “onmouseout” triggers when you move your mouse cursor out from that element.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            ES6 Events using onmouseover
            and onmouseout
        </title>
          
        <script type="text/javascript">
            function mouseOver() {
                document.getElementById("d1").style.color
                                = "green";
                  
                document.getElementById("d2").innerHTML
                                = "mouseOver triggered";
            }
      
            function mouseOut() {
                document.getElementById("d1").style.color
                                = "black";
                  
                document.getElementById("d2").innerHTML
                                = "mouseOut triggered";
            }
        </script>
    </head>
      
    <body style="text-align:center;">
          
        <h1 id="d1" onmouseover="mouseOver()"
                    onmouseout="mouseOut()">
            GeeksforGeeks
        </h1>
              
        <h3>
            when the cursor is on the element
            h1 the "onmouseover" gets triggers
            and when the cursor is out of h1
            the "onmouseout" gets triggers.
        </h3>
              
        <p id="d2"></p>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

onmousedown, onmouseup, onmousewheel : These event types will help us create nice effects with images or even with text as well. The “onmousedown” event triggers when you click the element and till you hold on to it when you release it “onmouseup” events triggers, “onmousewheel” event triggers when the mouse wheel is being rotated for the slightest.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE hmtl>
    <html>
      
    <head>
          
        <title>
            ES6 Events using onmousedown,
            onmouseup and onmousewheel
        </title>
      
        <script>
            function mouseDown() {
                document.getElementById("d1").style.color
                            = "blue";
                  
                document.getElementById("d2").innerHTML
                            = "mouseDown triggered";
            }
      
            function mouseUp() {
                document.getElementById("d1").style.color
                            = "green";
                  
                document.getElementById("d2").innerHTML
                            = "mouseUp triggered";
            }
      
            function mouseWheel() {
                document.getElementById("d1").style.color
                            = "violet";
                  
                document.getElementById("d2").innerHTML
                            = "mouseWheel triggered";
            }
        </script>
    </head>
      
    <body style="text-align:center;">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <p>
            when the mouse pointer clicks on the element h1,
            the text color changes to 'blue' when released 
            changes to 'green', if the mouse wheel rotates color
            changes to 'violet'.
        </p>
          
        <input id="d1" type="button" onmousedown="mouseDown()"
            onmouseup="mouseUp()" onmousewheel="mouseWheel()"
            value="Hello Geeks" />
          
        <p id="d2"></p>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

onsubmit: It’s an event that occurs when you try to validate a form before submitting it to the next action(server). You can put your form validation against this event type. With a click, the “onsubmit” calls the respective “return function()” assigned to it and takes the response from the function() in the form of true or false and decides the action. Check out this page ES6 | Validation for basic and detailed examples on “onsubmit”.

Check out the following table for few mostly used Event Handlers:

Attribute Description
onchange Gets trigger when an element changes
onfocus Gets trigger when the window gets focus
oninput Gets trigger when an element gets user input
onformchange Gets trigger when a form changes
onkeypress Gets trigger when a keyword key is pressed and released
onkeydown Gets trigger when a key is pressed
onkeyup Gets trigger when a key is released
onmousemove Gets trigger when the mouse pointer moves
onpause Gets trigger when the media data is paused
onscroll Gets trigger when an element’s scrollbar is being scrolled
onselect Gets trigger when an element is selected
onwaiting Gets trigger when the media has stopped playing, but is expected to resume
onpause Gets trigger when the media data is paused
onplay Gets trigger when the media data is going to start playing
onplaying Gets trigger when the media data has start playing

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.