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 neveropen() { document.write ("A Computer" + " Science Portal for Geeks") } </script> <h1 style="color:green;"> neveropen </h1> <h3> With a click, the “onclick” calls neveropen() </h3> <input type = "button" onclick ="neveropen()" 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()"> neveropen </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;"> neveropen </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 |
