Scope in the Context of Event Handlers
What do I Have Access to in my Event Handler?
While learning about JavaScript event handlers, one of hardest concepts for me to grasp (and one I am still working on) is closure or scope. I found myself continually unsure of what I had access to where, and then once realizing that I didn’t have access to a particular variable within the scope of the function I was working on, struggling to figure out how to access it. I often ended up with very long, rambling functions with no clear delegation because I would solve the problem by putting event listeners inside another function where I did have access to the variable I was looking for.
After a lot of hair pulling, I realized there are three basic ways to pass information when dealing with event listeners. Briefly, here are the three ways. If you wrap the event handler in another function, you can pass information in the argument of the parent function. You can add a dataset to a bit of information so you can access it by id later. And thirdly, you can use global state. I’ll go into more detail on the three methods below.
Passing Information via Arguments
This first way is probably the easiest to understand. Here’s an example:
In the example above, the event listener is wrapped in the renderBearName function which has the argument of bear. Because we pass bear in as an argument, we can therefore use bear.id in the callback function of the event listener getSingleBear(bear.id).
Adding Datasets
A second method to have in your toolkit is using datasets. Datasets are used to add an identifier to a piece of information so we can access and be able to grab it later. Think of datasets as Post-it notes or little flags that a developer adds for personal or internal use.
First, we add an id to the delete button on the fourth line using deleteButton.dataset.id = index. Now each of the delete buttons will have their own unique id. We utilize this id further down in the event handler on line 11.
Utilizing Global State
This third method is the one I’m least familiar with, so I won’t go too deep on it, but check out the example below.
Start by assigning a mutable, global variable. I usually do this at the very top of my file.
You can then reassign bearJSON to be equal to the bearData being passed in as an argument on line 2. This will capture the bearData within the bearJSON variable and you can in turn keep passing bearJSON to other functions. One thing you do have to watch out for though is that you have to keep tabs on the current state of your state variable which can get tricky. This method seems to have a lot of potential that I hope to explore further soon.
When you find yourself stumped over what data you have access to when using event handlers, consider using one of these three techniques. Can you wrap your event handler in another function and pass in the bit of data you need as an argument? Maybe you need a unique way to distinguish data, try adding an id using a dataset. One final approach to try is using state by setting a global variable that you can then pass in and out of functions as needed. With these three tools in your toolbox, hopefully you will have a smooth event handling journey.
