Java-Script Event Handlers and Events
Basically the term is used as JavaScript events but they are not actually JavaScript events they are HTML events and JavaScript act on those events and perform some action by using its event handler.
HTML or Java Script events are something that occur when some event happens like page loading, button click, key up etc.
To handle those events all, the three type of JS can be use either its inline, internal or external. Most used HTML event is onclick event and it occur when user click on some particular element usually button.
| 1 | <button onclick='alert(“hey”)'>Click me to see</button> |
Some Common events are:
- onclick()
- onload()
- onchange()
- onkeyup()
- onkeydown()
- oninput()
- oncontextmenu()
- onmouseover()
- onsubmit()
- onscroll()
- onclick()
| 1 2 3 4 5 | <script> function foo(){ document.write("Hello World"); } </script> |
| 1 | <button onclick="foo()">Click Me</button> |
In the above example an event is bound on the button and the event handler foo() will be called when the button is clicked.
2. onload()
| 1 2 3 4 5 | <script> onload=function func(){ alert("Hello"); } </script> |
This event reacts on page load. In the above example when this page loads an alert box will show displaying a message “Hello”.
3. onchange()
| 1 2 3 4 5 6 7 8 9 10 | <select id="mySelect" onchange="myFunction()"> <option >BSSE <option >BEE <option >MSE </select> <script> function myFunction() { alert("You select a new value"); } </script> |
This event occurs with there is a change in drop down menu, whenever a new item is selected then the alert box is shown.
4. onkeyup()
| 1 2 3 4 5 | <script> function func(){ alert("Hello World"); } </script> |
| 1 | <input type="text" onkeyup="func()" > |
Using this event we perform some action when a key is up after pressed. Like in example above, an input box and onkeyup event is triggered on that input box. When user tries to enter some value first time, press any key and then release it, this event handler run and show an alert box. onkeydown is almost same as when the key is pressed event handler will be called.
5. oninput()
This is similar as onkeyup and onkeydown events.
| 1 2 3 4 5 6 | <input type="text" id="myInput" oninput="myFunction()"> <script> function myFunction() { alert("some input was enterd"); } </script> |
6. oncontextmenu()
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> div { background: green; border: 2px solid black; padding: 10px; } </style> <div oncontextmenu="myFunction()" > <p>Right-click inside this box to see the context menu</p></div> <script> function myFunction() { alert("You right-clicked inside the div!"); } </script> |
This event occurs when user right click on the element in div.
7. onmouseover()
| 1 2 3 4 5 6 | <button onmouseover="func()" >Dont Hover Me</button> <script> function func(){ alert("hello"); } </script> |
This event is similar to CSS hover property this event occurs when the user takes mouse on the element where this event is set to be triggered.
8. onsubmit()
| 1 2 3 4 5 6 7 8 9 | <strong><form action=" " onsubmit="myFunction()"> Enter name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> <script> function myFunction() { alert("The form was submitted"); } </script></strong> |
This is a form event occurs when a form is submitted. Usually it is used to check and validate form inputs.
9. onscroll()
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> body { border: 1px solid black; width: 80%; height: 2000px; overflow: scroll; } </style> </head> <body onscroll="myFunction()"> <script> function myFunction() { alert("you try to scroll"); } </script> |
This event reacts when the user tries to scroll the page up or down.