JavaScript EventListeners

JavaScript Event Listeners

Event Listeners are a core part of using JavaScript in the browser and in some cases the server. So, what is an Event Listener?

 

What Is An Event Listener?

An event listener is a JavaScript function that listens to when a specified event is emitted/occurs on a webpage; this also applies to server-side JavaScript with certain classes in Node.js. Events are often marked by a string indicating the event name/symbol. Then, the function listens to when that symbol is emitted somewhere on the page or in your Node.js application. Now, we know what it is, let’s go into detail on how it works.

 

Event Listener – Gritty Details

An event listener has three core components; the listener, event, and the emitter.

 

Listener

Listeners are the JavaScript function you pass in, which often take a parameter passed from the emitter; on web pages, this is often the DOM element’s “eventTarget” that provides an object with information about where the event occurs. Now, these listener functions are stored within an object inside the event listener for later execution. Now, that leads me to how they’re stored — events.

 

Events

Events are symbol names that correspond to the event you want to run/listen to. You can have multiple listeners attached to a single event. And, because you can have multiple listeners for a single event, those listeners must be listed under the symbol name.

Here’s an example to picture the structure of the object.

Now, this isn’t valid JavaScript code, but it emphasizes the structure of an event listener. Besides, you can’t effectively look at the attached listeners of a DOM object. But, as you can see it’s simply an object with symbol names mapped to functions to be executed. Which leads me to the emitter.

 

Emitter

Events are emitted, thus it’s a function/method on the event listener itself that runs each added listener. Using the structure above, it selects the symbol from the underlying object and then executes each function the list. This emit method is then tied to the specific methods and processes that would emit the corresponding event. For example, when you click on a DOM element, the element still runs the emit method for the “onclick” event. Now, explanations are nice, but here’s an example of an event listener I created in the Node.js style. The same applies similarly to the event listeners in the browser.

Now, explanations are nice, but here’s an example of an event listener I created in the Node.js style. The same applies similarly to the event listeners in the browser.

In this example, we have a class called EventEmitter; this mimics a style similar to the Node.js EventEmitter class. The idea is similar to the event listeners in the browser. The on and once methods allow us to register handlers/listeners to the _events object. Then, the emit method is used to call those listeners when that method is called. The important thing to note about the emit method is this can be used in other inherited classes (Function prototypes) to run that method internally when certain events happen to the object. Now, a small detail on the event architecture.

The reason event listeners are so popular is that they allow you to link objects together without tightly coupling them together. This is very important because it allows you to build your projects in a more modular way. Listening for events allows objects to send messages to each other along with the necessary parameters.

 

Anyway, I hope this helps you, and that you can use event listeners in your project to effectively manage objects and classes.

Leave a Reply

Your email address will not be published.