Updated October 13, 2023
Introduction to JavaScript Events
An Event in the java scripting programming language can be explained as any and all the activities performed on the web page, like a click or a scroll or a selection action. There are multiple occasions when an event is implemented in the javascript. They are Onclick event, Onkeyup event, Onkeydown event, Onmouseover event, Onmouseout event, Onchange event, Onblur event, Onload event, Onfocus event, Onsubmit event, Ondblclick event, Onkeypress event, Onselect event, Onscroll event, Onresize event and Oninput event.
Different JavaScript Events
We have so many JavaScript events which can be performed in the various scenario:
1. Onclick Event
This is the most commonly used event. It gets the call when the user clicks on the left side of their mouse. We can write our logic against this event depending upon the requirement. But mostly we can use it to validate user input, save our data, call backend services. etc. Usually, we use this with button-type input.
Example:
<html>
<head>
<script type = "text/JavaScript"
function submit() {
alert("click performed")
}
</script>
</head>
<body>
<form>
<input type = "button" onclick = "submit()" value = "click performed" />
</form>
</body>
</html>Output:
2. Onkeyup Event
When we press the key on the keyboard and release the control it gets the call. Basically, it is a keyboard event and performs the logic when we release control over a particular key. In short, it is a key release event.
Example:
<!doctype html>
<html>
<head>
<script>
function submit() {
alert("keyup performed")
}
</script>
</head>
<body>
<input onkeyup="submit()" >
</body>
</html>Output:
3. Onkeydown Event
This event gets calls when we press the key on the keyboard. It is also a keyboard event. It is a keypress event.
Example:
<html>
<head>
<script>
function submit() {
alert("keydown performed")
}
</script>
</head>
<body>
<input onkeydown="submit()" >
</body>
</html>Output:
4. Onmouseover Event
It gets the call when we put the mouse over an element on which it is bound. By using this we can show a message on hovering over any image or link over any text. However, it also depends upon the requirement when we want to use it.
Example:
<head>
<script type = "text/JavaScript">
<!-- function over()
{
document.write ("Mouse Over Performed");
} //-->
</script>
</head>
<body>
<div onmouseover = "over()" >
<h2> Mouse over h2 tag </h2>
</div>
</body>
</html>Output:
5. Onmouseout Event
It gets the call when we move out of our mouse from the element on which it is bound. By using this we can hide the message or we can change the colour, perform so many effects on images and documents.
Example:
<head>
<script type = "text/javascript">
<!-- function out()
{
document.write ("Mouse Out Performed"); } //-->
</script>
</head>
<body>
<div onmouseout = "out()">
<h2> Mouse out h2 tag </h2>
</div>
</body>
</html>Output:
6. Onchange Event
It gets the call when there is any change detected in the element on which it is bound to, calls when any change in the element value. This can be used when we want to track the change perform by a user or constantly when we need the current date or the latest data.
Example:
<head>
<title>Onchange</title>
</head>
<body>
<input onchange="alert(this.value)" type="number">
</body>
</html>Output:
7. Onblur Event
This event gets a call when an element loses its focus on which it is bound.
Example:
<head>
<title> onblur </title>
</head>
<body>
<input onblur="alert(this.value)">
</body>
</html>8. Onload Event
This event gets the call when an element is loaded completely. This can be used with image(img) tag then we can show an acknowledge message to the user that it got uploaded successfully.
Example:
<head>
<title>Onload</title>
</head>
<body>
<img onload="alert('Your image loaded')" src="your image path">
</body>
</html>9. Onfocus Event
This event gets the call when the element receives focus on which it is bound.
Example:
<!doctype html>
<html>
<head>
<script>
function focus() {
alert("In focus")
}
</script>
</head>
<body>
<input id="inp" onfocus="focus()">
</body>
</html>10. Onsubmit Event
We can use this event when we want to submit user input from the form. By this, we can call any function or method which handles the validation on user input.
Example:
<head>
<script type = "text/javascript">
<!-- function submit() { alert("form submitted without error") } //-->
</script>
</head>
<body>
<form onsubmit = "submit()">
<input type = "submit" value = "Submit" />
</form>
</body>
</html>Output:
11. Ondblclick Event
This gets the call when we double click mouse on which element it is bound to.
Example:
<html>
<head>
<script>
function doubleClick() {
alert("doubleClick performed")
}
</script>
</head>
<body>
<p ondblclick="doubleClick()">Double-click this!</p>
</body>
</html>Output:
12. Onkeypress Event
It gets the call when a key is pressed and release both. It is also a keyboard event.
Example:
<html>
<head>
<script>
function submit() {
alert("onkeypress performed")
}
</script>
</head>
<body>
<input onkeypress="submit()" >
</body>
</html>Output:
13. Onselect Event
This event gets calls when an element is selected.
Example:
<html>
<head>
<script>
function select() {
alert("onselect performed")
}
</script>
</head>
<body>
<input type="text" onselect="select()">
</body>
</html>Output:
14. Onscroll Event
This event gets the call when we scroll the element scrollbar on which it is bound to.
Example:
<html>
<head>
<script> function scroll() { alert("scroll performed") }
</script>
</head>
<body>
<div onscroll="scroll()">
</body>
</html>Output:
15. Onresize Event
This event gets the call when we resize the window. basically we used this with the body.
Example:
<html>
<head>
<script>
function resize() {
alert("resize performed")
}
</script>
</head>
<body onresize="resize()">
</body>
</html>Output:
16. Oninput Event
When the user gives input.
Example:
<head> <script> function demo() { alert("input performed") } </script> </head> <body > <input type="text" oninput="demo()"> </body> </html>Output:
Conclusion
So by using the event we can bind our logic inside it and perform the action with respect to it. We have many different events mentioned above.
Recommended Articles
This is a guide to JavaScript Events. Here we discuss the introduction, Different JavaScript Events implemented along with the examples and the outputs. You can also go through our other suggested articles to learn more–
