EventTarget: addEventListener() method

It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the Event Object, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them? There are a number of good methods for doing this.

As mentioned above, you can use Function.prototype.bind() to pass a value to an event listener via the this reference variable.

This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.

When an outer scope contains a variable declaration (with const, let), all the inner functions declared in that scope have access to that variable (look here for information on outer/inner functions, and here for information on variable scope). Therefore, one of the simplest ways to access data from outside of an event listener is to make it accessible to the scope in which the event listener is declared.

Note: Although inner scopes have access to const, let variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. Why? Because by the time the event listener would execute, the scope in which it was defined would have already finished executing.

Unlike most functions in JavaScript, objects are retained in memory as long as a variable referencing them exists in memory. This, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes. Let's explore this.

Note: Functions in JavaScript are actually objects. (Hence they too can have properties, and will be retained in memory even after they finish executing if assigned to a variable that persists in memory.)

Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.

In this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of someObject.aProperty would have changed, because someObject persists in memory (by reference) in both the event listener and interval function, both have access to the same data (i.e. when one changes the data, the other can respond to the change).

Note: Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g., let a = b = {aProperty: 'Yeah'};), changing the data in either variable will affect the other.

Note: Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.