Events in ES6
Events in ES6
The events can be defined as the actions or the occurrence of an action that is perceived by the software.
The event is used to handle the interaction between JavaScript and HTML. The event occurs when a developer or the browser manipulates the web page. An event can be triggered by a developer or a computer system. It is also considered as a part of the Document Object Model (DOM) Level 3.
The events occur when any interaction is needed on a web page. In the program source code, the HTML code consists of a set of events that can trigger the JavaScript code. We have some common examples of events which are-
a web page loading, clicking on a button, click on a hyperlink, etc.
Event Handler
When an event occurs, the application or software release a group of tasks, the code block accomplishes this task, known as event handler. The HTML elements have a group of events correlated with it. The event handler is used to determine the processing of events in JavaScript.
Here, we have some most common events used in HTML language. They are-
onsubmit Event type
This event occurs when we are going to submit a form. The onsubmit event invokes the related return function (). It also gets the return value(true or false)from the function (). If we get true, then the form will be submitted otherwise not.
Example
Here, we have an example to understand the above event.
<html> <head> <script type = "text/javascript"> function validation() { all validation goes here return either true or false } </script> </head> <body> <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> . . . . . . . <input type = "submit" value = "Submit" /> </form> </body> </html>
Output
After the execution of the above example, we got the following output:
onclick Event type
The onclick event is the most commonly used event type, triggered when we click on a button. This event type is used to display validation, warning, etc. The onclick event invokes the correlated function when we click.
Example
Here, we have example to elaborate the onclick event.
<html> <head> <script type = "text/javascript"> function hello() { alert ("Welcome to ES6"); } </script> </head> <body style="text-align:center;"> <p> Click the button</p> <input type = "button" onclick = "hello()" value = "Click me " /> </body> </html>
Output
After the execution of the above code, we got the following output:
After the clicking on the button, we got the following output:
onmouseout and onmouseover Event type
These events are used to generate effects with images and text. The onmouseover event triggers when the user moves the mouse pointer out from the item. The onmouseout event triggers if the user put the mouse pointer on the elements.
Example
Here, we have an example to understand the above event.
<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 = "red"; } function mouseOut() { document.getElementById("div1").style.color = "brown"; document.getElementById("div2").innerHTML = "mouseOut triggered"; document.getElementById("div2").style.color = "blue"; } </script> </head> <body style="text-align:center;"> <h1 id="div1" onmouseover="mouseOver()" onmouseout="mouseOut()"> Bring your cursor here. </h1> <h3> Move the cursor on the above line. </h3> <h2><p id="div2"></p></h2> </body> </html>
Output
After the successful execution of the code, we got the following output:
If we bring the mouse pointer over the first heading, then we will get the following output.
Standard Events in HTML5
Sr. No. | Events | Description |
1. | Offline | This event triggers if the document is offline. |
2. | Onabort | It triggers when an event aborts. |
3. | onbeforeonload | This event triggers before the document loading. |
4. | onafterprint | It triggers after the document printing. |
5. | onbeforeprint | This event triggers before the document printing. |
6. | Onchange | This event triggers during the element modification. |
7. | Onblur | It triggers if we have lost focused window. |
8. | Onclick | This event triggers when we click the mouse. |
9. | oncanplay | It triggers if the media play starts. |
10. | oncontextmenu | This event triggers at the time of context menu starts. |
11. | Ondbclick | It triggers when we double click the mouse. |
12. | oncanplaythrough | It triggers until the media play ends without containing the stop or buffering. |
13. | ondrop | This event triggers if we have a drag drop element. |
14. | ondrag | It triggers if we have a dragged element. |
15. | ondragenter | This event trigger when the element dragged to drop destination. |
16. | ondragend | It triggers at the ending of the drag process. |
17. | ondragover | This event triggers if we drag an element over to drop the destination. |
18. | ondragleave | It triggers if the element leaves the drop destination. |
19. | ondurationchange | This event is used to trigger if the media length change. |
20. | ondragstart | It triggers at the starting of a drag process. |
21. | onemptied | This event triggers if the media resource element becomes empty. |
22. | onended | It triggers when the media is going to end. |
23. | onerror | It triggers at the time of error arising. |
24. | onfocus | It triggers when the window gets focus. |
25. | onforminput | It triggers when the form takes the input from the user. |
26. | onformchange | This event triggers when the form changes. |
27. | oninput | It triggers when the element takes input from the user side. |
28. | onhaschange | This event triggers at the time of document modification. |
29. | onkeyup | It triggers on the release of the key. |
30. | oninvalid | This event triggers if the element is invalid. |
31. | onkeypress | It triggers at the time of releasing and pressing of the key. |
32. | onkeydown | It triggers when the key is only pressed. |
33. | onload | This event triggers at the time of document loading. |
34. | onloadeddata | It triggers when the media data gets loaded. |
35. | onloadedmetadata | It triggers when the media data and duration (media element) is loaded. |
36. | onloadstart | It triggers if the browser starts the loading of media data. |
37. | onmessage | It triggers when we get the message. |
38. | onmousedown | This event triggers when the mouse button gets pressed. |
39. | onmousemove | It triggers on the mouse pointer moving. |
40. | onmouseout | It triggers if the mouse pointer moves out of an element. |
41. | onmouseover | This event triggers if the mouse pointer moves over an element. |
42. | onmousewheel | It triggers when the mouse wheel is being rotated. |
43. | onmouseup | This event triggers when the mouse button is released. |
44. | onoffline | It triggers when the document is offline. |
45. | ononline | It triggers when the document is online. |
46. | onpagehide | This event triggers when the window gets invisible. |
47. | onpageshow | This event triggers when the window gets visible to the user. |
48. | onplaying | It triggers when media data starts playing. |
49. | onplay | This event triggers when the media data is going to starts playing. |
50. | onprogress | It triggers if the browser fetching the media data. |
51. | onpause | This event triggers when the media data is paused. |
52. | onratechange | This event triggers when the media data playing rate is being changed. |
53. | onpopstate | It triggers if the window history changes. |
54. | onredo | This event triggers if any document performs the redo operation. |
55. | onreadystatechange | It triggers when we get a modification in the ready-state. |
56. | onscroll | This event triggers if the element’s scrollbar scrolls. |
57. | onresize | It triggers if the window size is being changed. |
58. | onseeked | It triggers when the media element’s seeking attribute is false, and the seeking has finished. |
59. | onseeking | It triggers when the media element’s seeking attribute is true, and the seeking has started. |
60. | onstalled | This event triggers when an error occurs in media data fetching. |
61. | onselect | It triggers if we select the element. |
62. | onstorage | It triggers during the document loading. |
63. | onsubmit | It triggers when the form is being submitted. |
64. | onwaiting | This event triggers if the playing of media has stopped, but it will be expected to restart. |
65. | onvolumechange | This event triggers when the media volume is being changed or muted. |
66. | onundo | This event triggers if any document performs the undo operation. |
67. | onunload | It triggers when the document is discarded by the user. |
68. | onsuspend | It triggers when the browser fetching the media file and stopped in between, and the total data is not fetched. |
69. | ontimeupdate | This event triggers when the media’s playing position is being changed. |