JavaScript Course for Free

What are Events in JavaScript

June 14, 2023

Hello everyone, welcome back. In this module, I will be talking about what are events in JavaScript. So far we have learned many things in JavaScript like variables, data types, conditional statements, loops, etc. Now, after reading this module, you will be getting to know what Events in JavaScript are and how to use them. Let’s get started without any delay.

Table of Contents

What are Events in JavaScript

An event in JavaScript is an action that is performed either by the user or the browser. JavaScript interacts with HTML with the use of the events. For example, when the user clicks on a button, a piece of information is displayed through popup boxes or some styling of the web page changes. When a web page loads, it is referred to as an event. Other examples of events are resizing and closing the window, submitting the form, pressing a key on the keyboard, etc.

Each event in JavaScript is associated with an event handler. An event handler is a JavaScript function created by the programmer, which will be executed when the event is fired. Event handlers are also known as Event Listeners. User input or actions, and browser activities may all be handled and verified via event handlers. Thus, JavaScript uses Event handlers to handle HTML events.

You can use JavaScript events in your HTML document by using the following syntax:

Syntax

Using single quotes
<element event_name=’JavaScript code’>
Using double quotes
<element event_name=”JavaScript code”>

There are a lot of events in JavaScript, but I’ll only go through a few of them.

Some basic Events in JavaScript

Click Events in JavaScript

onclick
This event is executed when the user clicks on any HTML element i.e., HTML tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="Submit" onclick="showmessage()"/>
<script>
function showmessage()
{
alert('Hello!');
}
</script>
</body>
</html>

ondblclick
It is an event that is executed when the user double-clicks on any HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="Submit" ondblclick="showmessage()"/>
<script>
function showmessage()
{
alert('This is a double click!');
}
</script>
</body>
</html>

oncontextmenu
When a user right-clicks on an HTML element, this click event happens.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="Submit" oncontextmenu="showmessage()"/>
<script>
function showmessage()
{
alert("This is a contextmenu event.");
}
</script>
</body>
</html>

Mouse Events in JavaScript

onmouseover
It is a mouse event that occurs when the mouse cursor enters the HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="MouseOver" onmouseover="mouseOver()"/>
<script>
function mouseOver()
{
alert("This is a mouseover event.");
}
</script>
</body>
</html>

onmouseout
This mouse event happens when the mouse pointer exits or moves out of the HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="MouseOut" onmouseout="mouseOut()"/>
<script>
function mouseOut()
{
alert("This is a mouseout event.");
}
</script>
</body>
</html>

onmousedown
When the mouse button is pressed over an HTML element, this mouse event happens.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="MouseDown" onmousedown="mouseDown()"/>
<script>
function mouseDown()
{
alert("This is a mouse down event.");
}
</script>
</body>
</html>

onmouseup
When a user releases a mouse button over an element, this event happens.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body>
<input type='button' value="MouseUp" onmouseup="mouseUp()"/>
<script>
function mouseUp()
{
document.write("<h1>This is a mouse up event.</h1>");
}
</script>
</body>
</html>

Keyboard Events in JavaScript

onkeydown
This is a keyboard event which occurs when a user enters or presses a key.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body onkeydown="KeyDown()">
<h1>Events in JS</h1>
<script>
function KeyDown()
{
document.write("<h1>This is a key down event.</h1>");
}
</script>
</body>
</html>

onkeyup
When a user releases a key, this is a keyboard event that occurs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
input{
width: 200px;
height: 50px;
font-size: larger;
}
</style>
<body onkeyup="KeyUp()">
<h1>Events in JS</h1>
<script>
function KeyUp()
{
document.write("<h1>This is a key up event.</h1>");
}
</script>
</body>
</html>

Form Events in JavaScript

onfocus
This event occurs when the focus comes over the form element. With <input>, <select>, and <a>, the onfocus event is most commonly used.

onblur
This is a form event that is executed when the focus is removed from the form element. It is the opposite of an onfocus event.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for='name'>Enter Your Name:</label>
<input type="text" onfocus="focusEvent(this)" onblur='blurEvent(this)'/>
</form>
<script>
function focusEvent(event)
{
event.style.background='lightblue';
}
function blurEvent(event)
{
event.style.background='yellow';
}
</script>
</body>
</html>

onsubmit
It is executed when the form is submitted by the user.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form onsubmit="document.write(new Date());">
<label for='name'>Enter Your Name:</label>
<input type="text"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

onchange
This form event occurs when the value of a form element is modified or changed by the user. When the checked state of radio buttons and checkboxes are changed, the onchange event is triggered.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" onchange="document.write('<h1>You have clicked on checkbox.</h1>');"/>
</body>
</html>

Window Events in JavaScript

onload
This event is fired when the browser finishes loading the page, this event is fired.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="fun()">
<h1>This is a Window onload event.</h1>
<script>
function fun()
{
window.alert('Page is completely loaded.');
}
</script>
</body>
</html>

onunload
It is an event which is fired when the page is unloaded.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onunload="fun()">
<h1>This is a Window onunload event.</h1>
<script>
function fun()
{
window.alert('Page is not completely loaded.');
}
</script>
</body>
</html>

onresize
This window event occurs when the window of the browser has been resized by the user.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onresize="fun()">
<h1>Events in JS</h1>
<script>
function fun()
{
window.alert('Window resize event.');
}
</script>
</body>
</html>

How to combine two events in JavaScript?

We can combine two events in JavaScript by using the addEventListener() method. The addEventListener() method is used to associate an event handler with a particular element.

Syntax
Element.addEventListener(event, function, useCapture);

event– It is a string value that represents the name of the event.
function– It consists of a block of code that specifies what action or activity to be performed when the event occurs.
useCapture– It is an optional parameter. It takes Boolean values i.e., true or false.

Let’s see the example for combining two events in JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Combining Two Events in JavaScript.</h1>
<script>
let h1=document.getElementsByTagName('h1')[0];

h1.addEventListener('click',()=>{
h1.innerText='Event-1 Click Event';
h1.style.color='red';
});
h1.addEventListener('dblclick',()=>{
h1.innerText='Event-2 On Double Click';
h1.style.color='blue';
});
</script>
</body>
</html>

I hope this module will be beneficial for you to know about events in JavaScript. For better understanding, you should try this by yourself and also implement other events. Stay tuned with us, for more informative and valuable modules like this. Keep Practicing!

What are Events in JavaScript

What are Events in JavaScript

Some basic Events in JavaScript

Click Events in JavaScript

Mouse Events in JavaScript

Keyboard Events in JavaScript

Form Events in JavaScript

Window Events in JavaScript

How to combine two events in JavaScript?

Company

Popular Courses

Support

Other