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 with 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:

HTML

<script>
    function geeks() {
        document.write ("A Computer"
                        + " Science Portal for Geeks")
    }
</script>

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<h3>
    With a click, the “onclick”
    calls geeks()
</h3>
<input type = "button"
       onclick ="geeks()"
       value = "Click here" />

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:

HTML

<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>

<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>

Output:

JavaScript 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:

HTML

<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>
<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>

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