Listening to Events in JavaScript
Throughout my time building out JavaScript applications, I have always found myself in need of Events and Listeners. Whenever it came to wanting something to happen If a user did something in my application. I have always relied on Events and Listeners because they gave me the ability to use these two tools that allow my Js application to “Listen” for “Events” that happen inside of the browser. For instance, whenever something is clicked on like a button or whenever the browser window is resized, etc. In this blog post, I’ll be introducing events and listeners and how they would be used in an application, and how to exactly apply them.
JavaScript Events
JavaScript can listen for command-like actions or “Events” that happen inside of the browser for instance when a user clicks on something or clicks a key on the keyboard. There are also many more events but the most common are mouse events, keyboard events, form events, and window events. Most of the event’s functions are straightforward by just reading the name.
JavaScript Listeners
While JavaScript events handle a user’s actions the Listener is programmed to “listen” for that specific action. Then after the Listener recognizes the input or signal was made it will begin to execute a callback function. A callback function is just a function that is passed into another function as an argument to be executed later.
#Grabbing the node from the DOMConst button = document.querySelector(‘button’) #Adding event listener to the node and listening for the ‘click’ event.
#The second argument is the callback function
button.addEventListener(‘click’) , function(event) { alert(‘Hey! the button was clicked)
}
Above is an example of synchronous event listening this approach can be useful in many scenarios in an application that’s why it is best to get familiar with the two terms. All in all, this article’s purpose is to explain events and listeners with a quick overview as they are very important.
