JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (29 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

What are Events in JavaScript and how they are handled?

Published on Sep 30,2019 48 Views
9 / 29 Blog from JavaScript

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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

 

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.

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.

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.

Comments
0 Comments

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.