There's no need to use anonymous functions for this kind of usage.

And then something like:

// I think we use ev rather than e or event? Not 100% sure otoh.
function onchange_maxNumbersOfAccounts(ev) {
  const elem = ev.target;

I use the function also for
onchange_maxNumbersOfAccounts(input);
any suggestion to fix it?

Did you mean to write onchange_selectInputChanger? The same way,

function onchange_selectInputChanger(ev) {
  const elem = ev.target

Another thing is the name btw, but I'll comment about that on another line.

ev.target does not work for input while calling onchange_maxNumbersOfAccounts(input);

I think something like an init event might be a touch more elegant, but let's leave it like this then. Any performance/memory related to anonymous functions is completely irrelevant here.

	input.dispatchEvent(new Event('change', {
		bubbles: true,
		cancelable: true,
	}));

I would like the event listener and/or the function name to be less deceptive about what's going on, however. ;-) change is probably the right event to use here.

thanks, it helped me a lot. That are the small little things I cannot google it, I need it told from an expert :)

The tl;dr is that if you add a lot of event listeners your page's memory usage can balloon, especially combined with anonymous functions. If you ever see a page that's just doing something like document.addEventListener('click', … and then checking if ev.target === some element, that's why. (Or perhaps not on the document, but in any case on the parent container div/form/whatever instead of the individual checkboxes.) While that's definitely not an issue here, one thing I've learned as a maintainer is that letting through something seemingly innocuous will suddenly be copied by someone else several years later as an example to follow, almost guaranteed. :-) Besides the memory usage, all the bubbling through all of the elements that have an event listener attached can also take much longer overall when you have a lot of them.

It's particularly when you're adding anonymous functions programmatically, like here in a for loop, that it can become problematic. For one-offs it probably doesn't make an appreciable difference, at least in memory usage, although it can affect performance in slightly unexpected ways (e.g., a regularly declared function might be JIT-compiled better than an anonymous one, at least in the past).

I'm not sure if what I steered this towards is necessarily the best way to approach this particular problem; you could also write something like, at its simplest:

const elem = ev.target || ev;

I just happen to find it more elegant to use the event listener itself instead of hacking the function to take either an event or an element. Another, probably clearer and better approach would be some indirection, i.e., a function that always takes an element (your original function) and a second non-anonymous function for the event listener that simply calls the first function with ev.target.

So much for tl;dr… but in any case, I hope that explains why adding anonymous functions in a for loop triggered my radar. I don't like pages that waste a lot of memory. ;-)

I would name this something more generic, otherwise it's very easy to get at best strange and at worst misleading function names like we see here. However, the function name is correct that you should probably be listening for change, not for click.

Regression fixed in #4312