ES6 | Events

23 Oct, 2019
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:<!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>
<!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>
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:<!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>
<!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>
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:<!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>
<!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>
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:
JavaScript-ES
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?