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