If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

How to addEventListener with argument?

When I was learning about the addEventListener method, I read that you're not supposed to include the parenthesis on the function you want to run because it will cause the event listener to 'fire off' immediately. If this is true, then how would you add an argument to a function you want to run?

Coding is a challenge, get used to itAlways remember to debugTry the guess & check methodBreak it down into simple steps

event listeners don't pass arguments: the event object is generated by the browser and passed as the first and only argument.

if you want to reach other data, give the data a name and point your handler to that name.
if you are adding many handlers to many elms in a loop, it can be slightly complicated.

in that case, i would use Array.map instead of the for, and your variables will magically line up when the handler fires later because map() uses a function, and the function has its own scope, unlike a for-loop routine where all handlers inherit the same scope.

you can use jQuery's map() to accomplish the same thing in old-school browsers.

...
if you want to reach other data, give the data a name and point your handler to that name.
if you are adding many handlers to many elms in a loop, it can be slightly complicated.

in that case, i would use Array.map instead of the for, and your variables will magically line up when the handler fires later because map() uses a function, and the function has its own scope, unlike a for-loop routine where all handlers inherit the same scope.
...

@rnd me:
Would you happen to have a brief example of the code that would accomplish this? Something simple with the extra parameter(s).
Preferably without using JQuery so I could understand the basics.

Elitis: Assuming I understood you, then hopefully you now see the "trick": You create an anonymous function and use *IT* to pass the arguments that you need. You can see there how you can pass along the event or this reference, if you want them.

@rnd me:
Would you happen to have a brief example of the code that would accomplish this? Something simple with the extra parameter(s).
Preferably without using JQuery so I could understand the basics.

here i closed links , grabbing the length property each event invocation (named clicker), and used [].map with an anon function named mapper as a loop construct.

this is good for "looped" setTimeout calls as well because the mapped function grabs "index" as a whole separate entity, unlike the typical for-loop "i" var which is always the loop length by the time the event actually fires...

also, you can avoid the .toArray() if you switch the arguments around (index, elm) on the map: jQuery's map() is backwards from ecma5's map(). it goes without saying that this fact makes me sad and angry.
but i needed a third party obje1ct for the demo, so i made a normal array to point to from the event handlers.

Well, unless of course you are in MSIE 8 or below where there's no evt.target. I tend to use this and avoid event unless another reason. I still have way way way too many customers using MSIE 7. And, as I discovered a couple of weeks ago, some still using MSIE 5 !!!

the above code calls "elm" what the other calls "this" or "evt.target" or "evt.srcElement".
to me, that's less to type and is easier to read than "this", which can get confusing and means different things in attachEvent() as it does in addEventListener()...

PS: if your site's visitors are browser-challenged, don't forget the array methods inline compat pack.
i like http://danml.com/js/f.js, which gives you JSON, the Array methods and more for under 4kb.
pro tip: use an HTML conditional comment to add such external script only in IE8 and below...

Well, unless of course you are in MSIE 8 or below where there's no evt.target. I tend to use this and avoid event unless another reason. I still have way way way too many customers using MSIE 7. And, as I discovered a couple of weeks ago, some still using MSIE 5 !!!

I think I figured out how to use 'rnd me's code with the following example.

The only part I'm not sure of is how the variable 'index' works in this context.
It does seem to increment on each click of the link (essentially acts as a counter)
but I don't see where it is initialized nor where it is stored between clicks.

Indeed, it is some tricky code. First, you get all links of the document and put it in an array. The code then calls the map function on it, which iterates over each element (= link) and applies a map function to it. This map function is passed the element and the index of the element within the array (this is where "index" comes from: it's initially 0 for the first link, 1 for the second link, …).
But instead of doing what you'd usually use the map function for, it just adds an event listener to each element. The index variable is within the closure of the mapper function and thus becomes a "counter" for each element (= link), with the little addition that the initial value is the index of the link within the document.

Is this sufficient to understand it?

Edit: To answer your two questions more specifically: the variable 'index' comes from the map function (see the documentation for Array.prototype.map) and it is 'stored' by keeping it alive in a closure. That's similar to this standard example: