Back to: JavaScript Tutorial For Beginners and Professionals
Examples of JavaScript Events
In this article, I am going to discuss Examples of JavaScript Events Types. Please read our previous article where we discussed JavaScript Events basics. At the end of this article, you will understand the examples of different Types of JavaScript Events.
Mouse events
Mouse Click Event:
When mouse is click on an element. Following is an example of JavaScript mouse click event:
<html>
<head>
<title>Click events </title>
</head>
<body bgcolor=green text="yellow">
<h4 align=center> Please Click the mouse on Image</h4>
<blockquote> The height & width of Image will get increased</blockquote>
<img id="img1" src="C:\Users\HP PC\Desktop\tweety.jpg" height=100 width=100 onclick="ff()">
<script>
function ff() {
document.all.img1.width = 500;
document.all.img1.height = 500;
}
</script>
</body>S</html>
Output:
Mouse down event:
When the mouse button is pressed over the element. Following is the example to understand this event.
<html>
<head>
<title>Onmousedown events </title>
</head>
<body bgcolor=green text="white" onmousedown="ff()">
<h4 align=center> Please click on the web page anywhere you want</h4>
<script>
function ff() {
alert("You clicked at : X " + event.screenX + " Y: " + event.screenY)
}
</script>
</body>
</html>
Output:
Mouse move event:
The following is an example of mousemove event.
<html>
<head>
<title>Onmousemove events </title>
</head>
<body bgcolor=green text="white" onmousemove="ff()">
<h4 align=center>Please move the mouse</h4>
<blockquote>
The X axis and Y axis position of Cursor on screen will be displayed in textbox
</blockquote>
name : <input type="text" name="t1" onkeydown="ff()">
<script>
function ff() {
document.all.t1.value = "X: " + event.screenX + " Y: " + event.screenY
}
</script>
</body>
</html>
Output:
Mouse out event:
When the cursor of the mouse leaves an element. The following is an example of Mouseout event.
<html>
<head>
<title>Onmouseout events </title>
</head>
<body bgcolor=green text="white">
<h4 align=center>Please bring your mouse over the image and remove it</h4>
<img id="img1" src="C:\Users\HP PC\Desktop\tweety.jpg" height=200 width=200 onmouseover="ff()" onmouseout="ff1()" />
<script>
function ff() {
document.all.img1.width = "190"
document.all.img1.height = "190"
}
function ff1() {
document.all.img1.width = "300"
document.all.img1.height = "300"
}
</script>
</body>
</html>
Output:
Mouse over event:
When the cursor of the mouse comes over the element. The following is an example of mouseover event.
<html>
<head>
<title>Onmouseover events </title>
</head>
<body bgcolor=green text="white">
<h4 align=center>Please bring your mouse over the image</h4>
<img id="img1" src="C:\Users\HP PC\Desktop\tweety.jpg" height=200 width=200 onmouseover="ff()" />
<script>
function ff() {
document.all.img1.width = "180"
document.all.img1.height = "180"
}
</script>
</body>
</html>
Output:
Mouseup event:
When the mouse button is released over the element . The following is an example of mouseup event.
<html>
<head>
<title>Onmouseup events </title>
</head>
<body bgcolor=green text="white" onmousedown="ff()" onmouseup="ff1()">
<h4 align=center>Please Drag the mouse on the web page anywhere you want</h4>
<script>
var x, y, x1, y1
function ff() {
x = event.screenX
y = event.screenY
}
function ff1() {
x1 = event.screenX
y1 = event.screenY
alert("You brought mouse down at : X " + x + " Y: " + y + " and brought it up at X: " + x1 + " Y: " + y1)
}
</script>
</body>
</html>
Output:
DOM / UI events
Load event:
This event is fired when the browser finishes the loading of the page. The example is given below for better understanding of load event.
<html>
<head>
<title>OnLoad events </title>
</head>
<body bgcolor=green text=”white” onload="wel()">
<marquee direction=up behavior=alternate scrollamount=5 size=0>
<h1 align=center> Welcome </h1>
</marquee>
<script>
function wel() {
document.bgColor = 'yellow'
document.fgColor = 'blue'
}
</script>
</body></html>
Output:
Reset event:
The reset event is fired when the user clicks on the reset button on the form. Following is the example to understand the reset event.
<html>
<head>
<title>Onreset events</title>
</head>
<body bgcolor=red text="white">
<form name="Shagufta" onreset="alert('This form is being reseted')">
Name : <input type="text" name=t1 id="tt1"> <br>
Address : <input type="text" name=t2> <br>
<input type="reset" name="b1"> <br>
</form>
</body>
</html>
Output:
Resize event:
This event is fired when the user resizes the window of the browser. The example is given below.
<html>
<head>
<title>Onresize events</title>
</head>
<body bgcolor=blue text="white" onresize="pp()">
<marquee direction=up behavior=alternate>
These pages are Developed by Shagufta Chaudhari.
</marquee>
<h1>
<marquee direction=right behavior=alternate>
These pages are Developed by Shagufta Chaudhari-1.
</marquee>
</h1>
<h1>
If you minimize or maximize this page onresize event will be fired.
</h1>
<script>
function pp() {
var a = confirm("Really want to resize")
if (a) {
document.bgColor = 'red'
}
else {
document.bgColor = 'green'
}
}
</script>
</body>
</html>
Output:
Select event:
The select event is fired when input text is selected. For better understanding please have a look at the following example.
<html>
<head>
<title>Onselect events</title>
</head>
<body bgcolor=blue text="white">
<form name="Shagufta" onselect="alert('hi')">
Name : <input type="text" name=t1 id="tt1"> <br>
Address : <input type="text" name=t2> <br>
Educational Qualification :
<select>
<option> 10th
<option> 12th
<option> Graduate
<option> Post Graduate
<option> PhD
</select><br>
Comments :<br>
<textarea rows=5 onselect="alert('yes delete this selected text')">
You can type this text and type your comments here
</textarea>
</form>
<script>
function ff() {
alert("The value being set is " + document.all.tt1.value)
}
</script>
</body>
</html>
Output:
Submit event:
This event is fired when the user click on the submit button. Following is an example of submit event.
<html>
<head>
<title>Onsubmit events</title>
</head>
<body bgcolor=red text="white">
<form name="Shagufta" onsubmit="alert('got submitted')">
Name : <input type="text" name=t1 id="tt1"> <br>
Address : <input type="text" name=t2> <br>
<input type="submit" name="b1"> <br>
</form>
</body>
</html>
Output:
Unload event:
This event is fired when the user leaves the current webpage, the browser unloads it. The example is given below for better understanding.
<html>
<head>
<title>Unload events</title>
</head>
<body bgcolor=green onload="wel()" onunload="thx()">
<marquee direction=up behavior=alternate scrollamount=5 size=0>
<h1 align=center> Welcome </h1>
</marquee>
<h1> Click on link to unload this page </h1>
<a href='firstProgram.html'> hit me to unload this page </a>
<script>
function wel() {
document.bgColor = 'yellow'
document.fgColor = 'blue'
}
function thx() {
alert("Thanx for visiting")
}
</script>
</body>
</html>
Output:
Keyboard events
keydown event
This event fire when the user presses a key. Following is an example of keydown event.
<html>
<head>
<title>onkeydown events </title>
</head>
<body bgcolor=green text=yellow>
<h4 align=center> Type character in the textbox </h4>
<blockquote> You will notice that the dialogbox appears before the character appears in the textbox </blockquote>
name : <input type="text" name="t1" onkeydown="ff()">
<script>
function ff() {
alert("you pressed " + event.keyCode)
}
</script>
</body>
</html>
Output:
keypress event
This event fire when the user presses a key. Following is an example of keypress event.
<html>
<head>
<title>onKeyPress events </title>
</head>
<body bgcolor=green text=yellow>
<h4 align=center> Type character in the textbox </h4>
<blockquote>
You will notice that the dialogbox appears before the character appears in the textbox
</blockquote>
name : <input type="text" name="t1" onkeypress="ff()">
<script>
function ff() {
alert("ASCII Code of the key you pressed : " + event.keyCode)
}
</script>
</body>
</html>
Output:
keyup event:
The keyup event fire when the user released the key. Following is an example of keyup event.
<html>
<head>
<title>onkeyup events </title>
</head>
<body bgcolor=green text=yellow>
<h4 align=center> Type character in the textbox </h4>
<blockquote>
You will notice that the dialogbox appears before the character appears in the textbox
</blockquote>
name : <input type="text" name="t1" onkeydown="ff()">
<script>
function ff() {
alert("ASCII Code of the key you pressed : "+ event.keyCode)
}
</script>
</body>
</html>
Output:
Focus events
blur event:
The blur event will be fired when the user moves the focus away from a form element. For better understanding of this event, please have a look at the following example.
<html>
<head>
<title>OnBlur events </title>
</head>
<body bgcolor=green text="white">
<h3 align=center>
<u>In this OnBlur example we used Javascript with in inverted quotes </u>
</h3>
<h4 align=center> just type text in text boxes and click on button</h4>
Name :<input type="text" name="t1" id="tt1"
onblur="document.all.tt1.style.background ='red';
document.all.tt1.style.color='white'"> <br>
Address : <input type="text" name="t2" id="tt2"
onblur="document.all.tt2.style.background ='red';
document.all.tt2.style.color='white'"> <br>
<input type="button" value="Hit me" name="b1">
</body></html>
Output:
focusin event:
The focusin event is fired when an element is about to receive focus. For better understanding of this event, please have a look at the following example.
<html>
<head>
<title>onFocus events </title>
</head>
<body bgcolor=green text="white">
<h3 align=center> In this example we used Javascript with in inverted quotes </h3>
Name :<input type="text" name="t1" onFocus="alert('Name text Got Focus ')"> <br>
Address : <input type="text" name="t2" onFocus="alert('Now focus is on second text box')"> <br>
</body>
</html>
Output:
In the next article, I am going to discuss Exception Handling in JavaScript with examples. Here, in this article, I try to explain the Examples of JavaScript Events Types. I hope you enjoy this article. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.