Events are actions or occurrences that happen in the system. In the world of programming, HTML events are something that happens to the HTML elements. But when JavaScript is used in HTML pages, it can react to these events. In this article, we will see what are the different types of events in JavaScript and how do they work, in the following sequence:
What are Events in JavaScript?
Javascript has events that provide a dynamic interface to a webpage. These events are connected to elements in the Document Object Model(DOM).
Also, these events by default use the bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script. With the help of JavaScript, you can detect when certain events happen, and cause things to occur in response to those events.
Types of Events in JavaScript
There are different types of events in JavaScript that are used to react to events. Here, we will discuss some of the famous or most commonly used events such as:
- Onclick
- Onkeyup
- Onmouseover
- Onload
- Onfocus
So let’s move on and have a look at these events in JavaScript with example.
Onclick Event
The Onclick event is a mouse event and provokes any logic defined if the user clicks on the element it is bound to. Let’s take an example and see how it works:
<!doctype html>
<html>
<head>
<script>
function edu() {
alert('Welcome to Edureka!');
}
</script>
</head>
<body>
<button type="button" onclick="edu()">Click Button</button>
</body>
</html>Output:
After Clicking the Button, you get the following alert message:
Onekeyup Event
This event is a keyboard event and it is used to execute instructions whenever a key is released after pressing. The following example shows the working of the event:
<!doctype html>
<html>
<head>
<script>
var a = 0;
var b = 0;
var c = 0;
function changeBackground() {
var x = document.getElementById('bg');
bg.style.backgroundColor = 'rgb('+a+', '+b+', '+c+')';
a += 1;
b += a + 1;
c += b + 1;
if (a > 255) a = a - b;
if (b > 255) b = a;
if (c > 255) c = b;
}
</script>
</head>
<body>
<input id="bg" onkeyup="changeBackground()"
placeholder="write something" style="color:rgb(10, 99, 151)">
</body>
</html>Output:
After you write something, it looks like this:
Onmouseover Event
The onmouseover event in JavaScript corresponds to hovering the mouse pointer over the element and its children, to which it is bound to. The example is shown below:
<!doctype html>
<html>
<head>
<script>
function hov() {
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseover="hov()"
style="background-color:rgb(61, 240, 225);height:400px;width:400px;">
</div>
</body>
</html>Output:
The colored box appears before hovering the mouse. As soon as you hover the mouse over the box, it disappears.
Onload Event
The onload event is evoked when an element is loaded completely. Let’s take an example and see how it works:
<!doctype html>
<html>
<head></head>
<body>
<img onload="alert('Image is loaded')"
alt="edu-Logo"
src="C:UsersxyzDesktopedureka logo.png">
</body>
</html>Output:
Onfocus Event
The Onfocus event has an element listing which executes instructions whenever it receives focus. The following example shows how the onfocus event works:
<!doctype html>
<!doctype html>
<html>
<head>
<script>
function focused() {
var e = document.getElementById('input');
if (confirm('Focus Event')) {
e.blur();
}
}
</script>
</head>
<body>
<p >Focus in the Input Box:</p>
<input id="input" onfocus="focused()">
</body>
</html>Output:
These are some of the most frequently used events in JavaScript. With this, we have come to end of our article. I hope you understood what are events and how they are used.
Learn the secrets of stunning UI/UX design with our UI UX Design Course.
Check out our Full Stack Developer Course which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Check out the Angular Course Online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
Got a question for us? Please mention it in the comments section of this blog and we will get back to you.