Adding Event listeners in javascript
Frontend DevelopmentGeneral

Adding Event Listeners in Javascript

3 Mins read

Whether you need to build an app or website in javascript, you’re almost certain to add some reactivity to your code at some point. One way to make your web/app reactive is to use event listeners and this article will explain what event listeners are in javascript and how to get started using them.

What are event listeners?

Events are actions stimulated when a user makes a change in the page on a browser. They play a crucial role in developing web apps using JavaScript.

Event listeners are properties that can be added to an element to listen for when a specified event occurs and are usually used in conjunction with callback functions. These callback functions are executed when the event listener they were paired with has been triggered.

A practical use case of event listeners in javascript can be seen in an example where you need to redirect a user to another page or section in your web app in the event of him/her clicking a button.

Adding event listeners in javascript

Prerequisites

  • Internet Browser (Chrome/Safari/Firefox)
  • Text Editor(Notepad/Visual Studio Code)

Now you’ve got an overview of what events and events listeners are, let’s get started.
In JavaScript, there’s an inbuilt function that helps a user to listen to various events known as the addEventListener().

The addEventListener() function takes the event to listen for, and a second argument to be called when an event is triggered . For example:

element.addEventListener(event, listener);
  • event : Events are used without “on” prefix like use “click” instead of “onclick” or “mousedown” instead of “onmousedown”.
  • listener : This is a function that will listen and respond to an event that is triggered.
Also Read:  How to easily remove event listeners in JavaScript in 2 ways.

Let’s try implementing event listeners in a JavaScript web app;

<!DOCTYPE html> 
<html> 

<body> 
    <button id="btn">Click me</button> 

    <h1 id="txt"></h1> 

    <script>                           
    document.getElementById("btn").addEventListener("click", function(){ 
           document.getElementById("txt").innerText = "It works"; 
     }); 
    </script> 
</body> 

</html> 

Output:

Here, we can see that since the button wasn’t clicked, no event is triggered and as a result, the callback function has to wait till the button is clicked before it can be executed.

Before clicking the button
Button in an idle state

When you click on the button, it triggers the click event, after which our callback function to display the “It works” text is executed in response.

After clicking the button
the result after the click event is fired

Examples of events listeners in javascript:

Now that we have an idea of what event listeners generally entail, let’s take a look at a few examples of listeners available for use in JavaScript

Click

This is an event that is fired when a user clicks on the primary button which is the left button of a mouse.

element.addEventListener(“click”, function(){ 
 //action to be performed after event is fired 
 });

Double Click

The double-click event is fired when a user double-clicks or clicks the primary mouse button twice.

element.addEventListener(“dblclick”, function(){\
 //action to be performed after event is fired 
});
 

Mouse-over

This is an event triggered when a mouse hovers over an element whether a text or button.

element.addEventListener(“mouseover”, function(){ 
 //action to be performed after event is fired 
 });

Mouse-out:

This event is fired when a mouse moves out of an element.


element.addEventListener(“mouseout”, function(){ 
});

Mouse-up:

It is fired when a user releases a button on the mouse.

 element.addEventListener(“mouseup”, function(){
});

Mouse-down:

It is fired when a user clicks on any button on the mouse.

element.addEventListener(“mousedown”, function(){ 
});

Keydown:

It is triggered when a user presses any key on the keyboard and when this user holds down the same key, this event continues in a repeated manner until the user releases the key.

element.addEventListener(“keydown”, function(){
});  

Key-up:

This event is fired when a user releases a key on the keyboard. It is only fired if a keypress event has already been triggered.

element.addEventListener(“keyup”, function(){ 
}); 

load:

This event fires when a webpage has been loaded. It can also be fired on elements like images, audio, objects, or scripts.

element.addEventListener(“load”, function(){ 
});

Unload:

This event is fired before a user leaves a webpage. It is triggered when a user wants to go to a new page on the site.

element.addEventListener(“unload”, function(){ 
});

There are many more events out there but these are the few important ones you will get to use very often.

Also Read:  [Quick Fix] How to fix "the mbstring extension is missing. please check your php configuration" in 2 Minutes.

Conclusion

Hopefully, this short tutorial has given you an overview of what event listeners are and how they can be used to make your app reactive. Have any feedback or comments concerning event listeners in Javascript? Leave them in the comments section below and I’ll be sure to respond to them.

Related posts
Frontend Development

Supercharging Javascript Arrays With the Spread Operator

1 Mins read
The spread operator can turn the elements of an array into elements of a function call or into elements of another array…
Frontend Development

Top Javascript frameworks for frontend development in 2022

2 Mins read
JavaScript frameworks are becoming more and more popular for frontend development. In this post, we’ll take a look at the top 10…
GeneralArticles

Understanding IPS Patching

5 Mins read
An Intrusion Prevention System (IPS) is a security mechanism that detects and prevents threats to networks. In this article, we’d take a…
Subscribe to more programming tutorials

Be the first to get notifications of byte-sized articles to make you a better programmer.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.