AngularJS (54 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (44 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (10 Blogs)
  • JavaScript and JQuery Essentials Training (2 Blogs)
SEE MORE

What are Events in JavaScript and how they are handled?

Last updated on Jun 08,2023 10.3K Views

9 / 31 Blog from JavaScript

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:

Output 1 - events in javascript - edureka

After Clicking the Button, you get the following alert message:

Output 2 - events in javascript- edureka

 

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:

Output 4 - events in javascript - edureka

 

Find out our UI UX Design Course in Top Cities

IndiaIndia
UI UX Designer Course in ChennaiUI UX Design Course in Mumbai
UI UX Design Course in PuneUI UX Design Course in Ahmedabad
UI UX Design Course in BangaloreUI UX Design Course in Delhi

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:

edureka logo - events in javacsript - edureka

 

 

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:

Onfocus - events in javascript - edureka

 

 

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 Web Developer Masters Program 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.

Upcoming Batches For Angular Course Online with Certification
Course NameDateDetails
Angular Course Online with Certification

Class Starts on 11th May,2024

11th May

SAT&SUN (Weekend Batch)
View Details
Angular Course Online with Certification

Class Starts on 29th June,2024

29th June

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

What are Events in JavaScript and how they are handled?

edureka.co