Understand JavaScript Events with Examples

Lesson 27 of 27By Simplilearn

Last updated on Jul 16, 202439747

Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch
Overview
An Introduction to JavaScript: Here Is All You Need to Know
Lesson - 1
JavaScript Hello World: Here's What You Need To Know
Lesson - 2
All You Need to Know About JavaScript Arrays
Lesson - 3
Using Array Filter In JavaScript to Filter Array Elements
Lesson - 4
Everything You Need to Know About Array Reduce JavaScript
Lesson - 5
Introduction To JavaScript Loops: Do-While, For, For-In Loops
Lesson - 6
All You Need to Learn About Javascript Functions
Lesson - 7
The Best Guide on How to Implement JavaScript Closures
Lesson - 8
JavaScript “This” Keyword and How to Implement It
Lesson - 9
How to Implement JavaScript Form Validation
Lesson - 10
An Introduction Guide To JavaScript RegEx
Lesson - 11
How to Do an Email Validation in JavaScript?
Lesson - 12
All You Need to Know About JavaScript Promises
Lesson - 13
How to Implement JavaScript Async/Await
Lesson - 14
JavaScript DOM Tutorial: 2020 Edition
Lesson - 15
JavaScript Objects: Properties, Methods, and Accessors
Lesson - 16
An Introduction to Javascript Games: The Best Guide
Lesson - 17
An Easy Guide to Build a Calculator App in JavaScript
Lesson - 18
Javascript Projects: The Best Guide
Lesson - 19
What is OOP in JavaScript? How is it Implemented?
Lesson - 20
The Best Guide to Understanding JavaScript Learning Path
Lesson - 21
Java Vs .NET: Which Is the Best Technology to Choose?
Lesson - 22
Top 80+ JavaScript Interview Questions and Answers for 2024
Lesson - 23
Typeof in JavaScript: Checking Data Types Using the Typeof Operator
Lesson - 24
Tips and Tricks That You Should Know Before Going to a Coding Interview
Lesson - 25
Callback Functions in JavaScript: Everything You Need to Know
Lesson - 26
JavaScript Events
Lesson - 27

Table of Contents

View More

An event is an action that occurs as per the user's instruction as input and gives the output in response. We can consider different types of inputs, such as mouse clicks, button presses, and when users press tab and text box change. In Javascript, when the user hits the button, it goes as requested and provides the response to the user in a form of output. JavaScript implements a component called an event handler that helps you acknowledge the certain action to the events. An event handler is a section of code that can be considered as a user-defined JavaScript function that operates when a particular event fires. We can define it as the registration of an event handler and can consider it as an event listener that performs and listens as an event and returns the result.

Types of JavaScripts

Here we can define various types of JavaScript, which can help application developers to develop the logic into certain functionalities. Before getting to an extensive understanding of types of Javascript events, we need to learn the below classification of JavaScript.

HTML5: This defines the multiple types of events, particularly using HTML script, and the numerous categories like “Submit and Input types of Button”, events such as “beforeload” and “hashchange”.
Browser Object Models (BOM): This category of JavaScript comes from W3 specs. Touchscreen devices using “touchstart”, “touchend” events are the perfect examples of BOM.
W3 DOM: It performs different types of DOM events along with the form elements.

Common Event Listeners

Following is the list of JavaScript listeners’ definitions which have specific types of methods.

Onload: When your page loads, it performs accordingly.
Onclick: When a user clicks on a button or inputs it occurs.
Onmouseover: When a user mouses over on the button.
Onfocus: Certain scenarios when a user keeps the cursor in a form field.
Onblur: If a particular form field leaves within it.

Below are the types of JavaScripts with examples of code syntax.

Onclick Events and Syntax

We can define it as a mouse event that stimulates as per the code logic you determine in your code. Here is the code snippet we can use.

Code:

<!doctype html>

<html>

<head>

<script>

function Greet() {

alert('Hello World!');

}

</script>

</head>

<body>

<button type="button" onclick="Greet()">Please click here! </button>

</body>

</html>

Output

JavaScript_events_1.

Onkeyup Event and Syntax

You can use this Javascript event in a scenario where you press a keyboard event and it performs as per your code logic. We can use the below code snippet.

Code:

<!DOCTYPE html>

<html>

<body>

Enter your First name: <input type="text" id="firstname" onkeyup="myKeyUpFunction()">

<p>My First name is: <span id="Test"></span></p>

<script>

function myKeyUpFunction() {

var input = document.getElementById("firstname").value;

document.getElementById("Test").innerHTML = input;

}

</script>

</body>

</html>

Output

JavaScript_events_2

Onmouseover Event and Syntax

We can use this event for hovering the mouse pointer when we put the cursor and it performs as per the logic of the element which is connected to and its child's elements. We can use the below code snippet.

Code:

<!DOCTYPE html>

<html>

<body>

<h1 id="demo">Test Mouse over me</h1>

<script>

document.getElementById("demo").onmouseover = function() {mouseOver()};

function mouseOver() {

document.getElementById("demo").style.color = "Purple";

}

</script>

</body>

</html>

Output

JavaScript_events_3

Onmouseout Event

When you leave the mouse cursor it moves to the element that controls a mouseout event;, a function associated with it is executed. The below code snippet can help you to understand the logic.

Code

<!DOCTYPE html>

<html>

<body>

<h1 id="demo">Test Mouse over me</h1>

<script>

document.getElementById("demo").onmouseout = function() {mouseOut()};

function mouseOut() {

document.getElementById("demo").style.color = "Red";

}

</script>

</body>

</html>

Output

JavaScript_events_4.

Onchange Event and Syntax

This event identifies the variance in the value of any element listing to this event. The best example of this is when text and dropdown list change events. The below code snippet can help you understand the logic as to how it converts the input name with the upper case when text changes.

Code:

<!DOCTYPE html>

<html>

<body>

Please Enter name: <input type="text" id="Firstname">

<script>

document.getElementById("Firstname").onchange = function() {myFunction()};

function myFunction() {

var x = document.getElementById("Firstname");

x.value = x.value.toUpperCase();

}

</script>

</body>

</html>

Output

JavaScript_events_5.

After changing the event:

JavaScript_events_6.

Onload Event and Syntax

The JavaScript onload event can be utilized when we have a specific requirement to execute a specific function once the page is represented fully. The below code snippet can help you understand the logic.

Code:

<!DOCTYPE html>

<html>

<body onload="checkyourCookies()">

<p id="OnloadTest"></p>

<script>

function checkyourCookies() {

var text = "";

if (navigator.cookieEnabled == true) {

text = "your web page Cookies are active.";

} else {

text = "your web page Cookies are not active.";

}

document.getElementById("OnloadTest").innerHTML = text;

}

</script>

</body>

</html>

Output

JavaScript_events_7.

Onfocus Event and Syntax

This Javascript function performs when the given instruction receives the focus as per the change or click event. The below code snippet can help you understand the logic.

Code:

<!DOCTYPE html>

<html>

<body>

<p>This is the best scenario to uses the addEventListener() function to attach a "focus" event to an input element box.</p>

Enter your First name: <input type="text" id="Firstname">

<script>

document.getElementById("Firstname").addEventListener("focus", myFunction);

function myFunction() {

document.getElementById("Firstname").style.backgroundColor = "DarkBlue";

}

</script>

</body>

</html>

Output

JavaScript_events_8

Input text focused

JavaScript_events_9.

Onblur Event and Syntax

This Javascript Onblur event triggers when a certain object loses focus. We can execute the below code to understand how to implement it.

Code

<!DOCTYPE html>

<html>

<body>

<p>This code snippet uses the addEventListener() method and performs a "blur" event to an input element.</p>

<p>please write something and see the result (blur).</p>

<input type="text" id="fname">

<script>

document.getElementById("fname").addEventListener("blur", myFunction);

function myFunction() {

alert("your Input element lost focus.");

}

</script>

</body>

</html>

Output

JavaScript_events_10.

Conclusion

We hope this article helped you understand JavaScript events. In this article, we discussed the concept of code structure of different types of events which will be helpful to professional developers from Java and .net backgrounds, application architectures, and other learners looking for information on JavaScript events.

Besides the course, you can also sign up on our SkillUp platform, a Simplilearn initiative. The platform offers numerous free online courses to help with the basics of multiple programming languages, including JavaScript. Additionally, you can also opt for our Java Certification Trainingcourse.

About the Author

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More

Recommended Programs

*Lifetime access to high-quality, self-paced e-learning content.

Explore Category

Find Java Certification Training in these cities

Java Certification Training in Austin Java Training in Dallas Java Training in New York Java Training in Spring

Recommended Resources

prevNext

Disclaimer
PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.