JavaScript Events

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.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

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.

  1. 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”.
  2. Browser Object Models (BOM): This category of JavaScript comes from W3 specs. Touchscreen devices using “touchstart”, “touchend” events  are the perfect examples of BOM.
  3. 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

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

  • 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.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

  • 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 Post Graduate Program in Full Stack Web Development course.

About the Author

SimplilearnSimplilearn

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
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.