JavaScript

What are JavaScript Events

You are riding in a car and a signal comes, It’s red, You stop. When the signal turns green, you start driving again. Your actions were based on some signal provided to you. Same goes for events. When you are programming, you want some actions to be performed by clicking a button or pressing a key. The clicking of the button or the pressing of a key generates an event. Based on this event, some action is performed. For example, there is an article and a button that reads “show more”. When you click that button, the whole article becomes visible

In this post, we are going to discuss everything about events with examples.

What is an Event

To put it simply, an event is an action performed by a user or initiated by the browser. JavaScript responds/reacts to that action; this reacting/responding to the event is called Event Handling. Event handling is just a piece of code written by the developer. This piece of code runs when the event is triggered. Event handlers are also called event listeners. Events are fired within the browser window and are related or attached to a single or a set of elements.  Events are of many different types. Some of them are:

  • User presses a key on the keyboard
  • User hovers over an element
  • User clicks an element via mouse
  • User closes the browser
  • User resizes the browser
  • Web Page is loading or has finished loading
  • When an error occurs
  • User submits a form

JavaScript Events

JavaScript provides us with a bunch of events. Listing all of them and explaining all of them under one article is impossible. Here I will only list the most common ones:

Input Events

  • bluer
  • change
  • focus
  • keyup/keydown
  • keypress

Mouse Events

  • Mouseover
  • Mouseout
  • Mousedown/mouseup

Click Events

  • click
  • Dblclick

Load Events

  • load
  • unload
  • error
  • Resize

Now that we have discussed the theory, let us go to the practicality and discuss some real life examples of JavaScript events. Suppose I have a button and when I click that button, I want an alert to be shown to the user. The clicking of the button triggers the event and then a block of code will handle the event and react by showing an alert.

<button class="clickme">Click Me</button>

This is a simple button in an html file. Now we will get the button via the class name and then will handle the event i-e click.

const btn=document.querySelector(".clickme");
btn.addEventListener('click',function(){
   alert("You clicked the button");
});

Put this code in a script tag or make another file with js extension and put it there.

Now when we click the button an alert will be shown:

There are also other ways we can implement this, for example:

const btn=document.querySelector(".clickme");
btn.onclick= function(){
   alert("You clicked the button");
};

Or:

const btn=document.querySelector(".clickme");
function clickedMe(){
   alert("You clicked the button");
};
btn.onclick=clickedMe;

The html file i-e the button remains the same.

Note: You can put your JavaScript code in a script tag and then run your html file in the browser using live server or create a different file with js extension and reference it inside the header of the html file.

Now let’s look at another example: Suppose we have a registration form. In the form we have two input fields and we want to put validation. If the user submits the form, we want to check whether the user filled both the inputs or left it empty. If both or one of them is empty we show an alert that the field is empty. Otherwise, we show an alert that says the user has registered:

<body>
   <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <input type="password" id="password" placeholder="Enter your Password">
      <button>Register</button>
   </form>
</body>

<script>

var myform = document.getElementById('myForm');
myform.onsubmit = function(){
   const name=document.getElementById("name").value;
   const password=document.getElementById("password").value;
   if(name && password){
      alert("Registered")
   }
   else{
         alert("Fill the required fields please")
   }
};

</script>

When we left the password field empty and clicked on the register an event triggered i-e submit. But based on our handler the input field “Password” was empty hence a message “Please fill the required fields” is shown.

When we filled both the fields and clicked on the register button, “Registered” was shown.

Conclusion

Events and event handling are really important concepts of JavaScript. When a user interacts with a web page an event is triggered. JavaScript provides event handlers to respond to these events and make web pages more interactive while providing immersive user experience. In those event handlers we can put our own code and logic and make something beautiful.

In this post, we briefly discussed what JavaScript events are and how we can handle them; then we moved onto the types of events and event handlers and their real life applications.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.