guupon.com – Page 2

Forms are already notoriously tough to customize and style — to the extent that we’re already starting to see new ideas for more flexible control. But what we don’t often discuss is designin

Javascript

January 4, 2026 0 4 dys

How To Design For (And With) Deaf People

Practical UX guidelines to keep in mind for 466 million people who experience hearing loss. More design patterns in Smart Interface Design Patterns, a friendly video course on UX and design patterns b

Accessibility

January 3, 2026 0 5 dys

Building An Offline-Friendly Image Upload System

Poor internet connectivity doesn’t have to mean poor UX. With PWA technologies like IndexedDB, service workers, and the Background Sync API, you can build an offline-friendly image upload system tha

Javascript

7 hrs

Freebie: Flat Jewels Icon Set

1 dy

Inclusive Dark Mode: Designing Accessible Dark Themes For All Users

2 dys

Software Development Lifecycle: The Definitive Guide [FREE]

3 dys

Creating An Effective Multistep Form For Better User Experience

4 dys

How To Design For (And With) Deaf People

AI In UX: Achieve More With Less

December 28, 2025 0 2 weeks

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 2 weeks

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 2 weeks

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 2 weeks

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 2 weeks

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 2 weeks

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 2 weeks

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 3 weeks

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)

December 19, 2025 0 3 weeks

How To Measure The Impact Of Features

Meet TARS — a simple, repeatable, and meaningful UX metric designed specifically to track the performance of product features. Upcoming part of the Measure UX & Design Impact (use the code 🎟

December 18, 2025 0 3 weeks

Freebie: Infographic Banner Elements

If you love to create infographics, then you might have come across our previously published ultimate infographic resource kits for designers post. There post contains tons of GUI kits, elements, inte

Freebies

January 8, 2026 7 hrs

Freebie: Flat Jewels Icon Set

We’re back, this time with a gem of a giveaway! Courtesy of Pixelkit, we have here 25 handpicked flat icons to be given away to hongkiat.com readers. Available in a variety of sizes â€“ from 32

Freebies

January 7, 2026 1 dy

Inclusive Dark Mode: Designing Accessible Dark Themes For All Users

Dark mode isn’t just a trendy aesthetic. It’s a gateway to more inclusive digital experiences, but only if designed thoughtfully. While its sleek visuals and reduced eye strain appeal to many, poo

Accessibility

January 6, 2026 2 dys

Software Development Lifecycle: The Definitive Guide [FREE]

Software development lifecycle may sound scary or confusing, but in fact, it’s a simple method of delivering software applications. Planning to start a software development project? Then this guide is here to map out your journey towards a successful, working app! In this article, we’ll explain […]

Business