guupon.com – Page 5

WCAG provides guidance for making interactive elements more accessible by specifying minimum size requirements. In fact, the requirements are documented in two Success Criteria: 2.5.5 and 2.5.8. Despi

Accessibility

February 4, 2026 0 2 mths

Uniting Web And Native Apps With 4 Unknown JavaScript APIs

Have you heard of the Screen Orientation API? What about the Device Orientation API, Vibration API, or the Contact Picker API? Juan Diego Rodriguez is interested in these under-the-radar web features

Javascript

February 3, 2026 0 2 mths

How To Build A Multilingual Website With Nuxt.js

Handling translations for multilingual websites is famously difficult and, yet, crucial for many companies and organizations that serve a global audience. Thankfully, modern tooling abstracts away a g

Javascript

1 mth

Persuasive Design: Ten Years Later

1 mth

Human Strategy In An AI-Accelerated Workflow

1 mth

Now Shipping: Accessible UX Research, A New Smashing Book By Michele Williams

2 mths

Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript

2 mths

Designing For Agentic AI: Practical UX Patterns For Control, Consent, And Accountability

Valentine’s Day Freebie: 15 Lovely Patterns

December 30, 2025 0 4 mths

If you haven’t gotten the hint yet, Valentine’s Day is this Saturday. Whether it’s for business or for your own personal use, chances are you’re probably in need of some Valentine’s Day insp

Freebies

December 29, 2025 0 4 mths

How To Make Your UX Research Hard To Ignore

Research isn’t everything. Facts alone don’t win arguments, but powerful stories do. Here’s how to turn your research into narratives that inspire trust and influence decisions.

December 28, 2025 0 4 mths

AI In UX: Achieve More With Less

A simple but powerful mental model for working with AI: treat it like an enthusiastic intern with no real-world experience. Paul Boag shares lessons learned from real client projects across user resea

December 27, 2025 0 4 mths

10 Most Popular Web Development Frameworks

These days you can do things in plenty of different ways. From the way you dress, to how you develop applications. That also applies to web development as there is no right or correct way to handle th

Business

December 26, 2025 0 4 mths

Web Development vs. Web Design: Unveiling The Difference

Does the difference between web development vs web design confuse you? Did you try to get your mind around the various roles and responsibilities of both parties, but found yourself in a ‘chicken an

Business

December 25, 2025 0 4 mths

Giving Users A Voice Through Virtual Personas

Turn scattered user research into AI-powered personas that give anyone consolidated multi-perspective feedback from a single question.

December 24, 2025 0 4 mths

Best Web Development Tools in 2022

Being a web developer isn’t an easy task as it requires plenty of knowledge, expertise, and patience. The variety of different web development tools can cause quite a headache but that’s where we

Business

December 23, 2025 0 4 mths

Infographic Elements By Vector Open Stock

If you have come across plenty of infographics online, you may have thought about releasing your own. There are a lot of tools out there to help you do this fairly easily but your design will be far f

Freebies

December 22, 2025 0 4 mths

Pictograms of Everyday Life (Freebie)

Pictograms are icons that depict anything under the sun in no context whatsoever – which makes it the perfect type of icon for any kind of use. The most common pictogram we all probably know by hear

Freebies

December 20, 2025 0 4 mths

Handling JavaScript Event Listeners With Parameters

Event listeners are essential for interactivity in JavaScript, but they can quietly cause memory leaks if not removed properly. And what if your event listener needs parameters? That’s where things

Javascript

Handling JavaScript Event Listeners With Parameters

Amejimaobari Ollornwi

2025-07-21T10:00:00+00:00 2025-12-20T13:32:49+00:00

JavaScript event listeners are very important, as they exist in almost every web application that requires interactivity. As common as they are, it is also essential for them to be managed properly. Improperly managed event listeners can lead to memory leaks and can sometimes cause performance issues in extreme cases.

Here’s the real problem: JavaScript event listeners are often not removed after they are added. And when they are added, they do not require parameters most of the time — except in rare cases, which makes them a little trickier to handle.

A common scenario where you may need to use parameters with event handlers is when you have a dynamic list of tasks, where each task in the list has a “Delete” button attached to an event handler that uses the task’s ID as a parameter to remove the task. In a situation like this, it is a good idea to remove the event listener once the task has been completed to ensure that the deleted element can be successfully cleaned up, a process known as garbage collecti on.

A Common Mistake When Adding Event Listeners

A very common mistake when adding parameters to event handlers is calling the function with its parameters inside the addEventListener() method. This is what I mean:

button.addEventListener('click', myFunction(param1, param2));

The browser responds to this line by immediately calling the function, irrespective of whether or not the click event has happened. In other words, the function is invoked right away instead of being deferred, so it never fires when the click event actually occurs.

You may also receive the following console error in some cases:

Uncaught TypeError: Failed to execute. `addEventListener` on `EventTarget`: parameter is not of type `Object`. (Large preview)

This error makes sense because the second parameter of the addEventListener method can only accept a JavaScript function, an object with a handleEvent() method, or simply null. A quick and easy way to avoid this error is by changing the second parameter of the addEventListener method to an arrow or anonymous function.

button.addEventListener('click', (event) => { myFunction(event, param1, param2); // Runs on click });

The only hiccup with using arrow and anonymous functions is that they cannot be removed with the traditional removeEventListener() method; you will have to make use of AbortController, which may be overkill for simple cases. AbortController shines when you have multiple event listeners to remove at once.

For simple cases where you have just one or two event listeners to remove, the removeEventListener() method still proves useful. However, in order to make use of it, you’ll need to store your function as a reference to the listener.

Using Parameters With Event Handlers

There are several ways to include parameters with event handlers. However, for the purpose of this demonstration, we are going to constrain our focus to the following two:

Option 1: Arrow And Anonymous Functions

Using arrow and anonymous functions is the fastest and easiest way to get the job done.

To add an event handler with parameters using arrow and anonymous functions, we’ll first need to call the function we’re going to create inside the arrow function attached to the event listener:

const button = document.querySelector("#myButton"); button.addEventListener("click", (event) => { handleClick(event, "hello", "world"); });

After that, we can create the function with parameters:

function handleClick(event, param1, param2) { console.log(param1, param2, event.type, event.target); }

Note that with this method, removing the event listener requires the AbortController. To remove the event listener, we create a new AbortController object and then retrieve the AbortSignal object from it:

const controller = new AbortController(); const { signal } = controller;

Next, we can pass the signal from the controller as an option in the removeEventListener() method:

button.addEventListener("click", (event) => { handleClick(event, "hello", "world"); }, { signal });

Now we can remove the event listener by calling AbortController.abort():

controller.abort()

Option 2: Closures

Closures in JavaScript are another feature that can help us with event handlers. Remember the mistake that produced a type error? That mistake can also be corrected with closures. Specifically, with closures, a function can access variables from its outer scope.

In other words, we can access the parameters we need in the event handler from the outer function:

function createHandler(message, number) { // Event handler return function (event) { console.log(`${message} ${number} - Clicked element:`, event.target); }; } const button = document.querySelector("#myButton"); button.addEventListener("click", createHandler("Hello, world!", 1)); }

This establishes a function that returns another function. The function that is created is then called as the second parameter in the addEventListener() method so that the inner function is returned as the event handler. And with the power of closures, the parameters from the outer function will be made available for use in the inner function.

Notice how the event object is made available to the inner function. This is because the inner function is what is being attached as the event handler. The event object is passed to the function automatically because it’s the event handler.

To remove the event listener, we can use the AbortController like we did before. However, this time, let’s see how we can do that using the removeEventListener() method instead.

In order for the removeEventListener method to work, a reference to the createHandler function needs to be stored and used in the addEventListener method:

function createHandler(message, number) { return function (event) { console.log(`${message} ${number} - Clicked element:`, event.target); }; } const handler = createHandler("Hello, world!", 1); button.addEventListener("click", handler);

Now, the event listener can be removed like this:

button.removeEventListener("click", handler);

Conclusion

It is good practice to always remove event listeners whenever they are no longer needed to prevent memory leaks. Most times, event handlers do not require parameters; however, in rare cases, they do. Using JavaScript features like closures, AbortController, and removeEventListener, handling parameters with event handlers is both possible and well-supported.

(gg, yk)

March 11, 2026 1 mth