I am writing multiple links that share the same addEventListener function(deleteFavorite) and I want to pass something into the addEventListener function but don't see how to do it, is this even possible? anyone have an idea on how to handle a situation like this? I need to somehow know which entry to delete.


var favorites = {"http://www.google.com/", "http://www.yahoo.com/", "http://www.dogpile.com/"};
...
for(var i = 0;i<favorites.length;i++){
var del = document.createElement('a');
del.setAttribute("href","#");
del.setAttribute("title","delete " + favorites[i]);
del.innerHTML = "delete";
del.addEventListener('click', deleteFavorite, false);
}


I'm not sure what you're trying to do, but if all you're looking for is del itself, use this to refer to it within the deleteFavorite function; if you need to pass in more than that, you'll have to use an anonymous wrapper function, as in

del.addEventListener('click', function(){deleteFavorite(foo, bar, quux)}, false);

yes, you are understanding it correctly.

the problem with using an anonymous wrapper like that is foo, bar, and quux end up being the same for all of the links, I want to pass arguments into the deleteFavorite function that are specific to the link that fires the event.

what I am trying to do is to dynamically maintain a list of favorite threads on a message board(using GM_setValue and storing the favorite threads in a comma seperated listed). I am able to add and display the threads I have marked as favorites I just can't figure out how to delete one.

You have a for() loop, specifying a different del every time; so there's no reason you couldn't also specify different foos, bars, and quuxes for each listener as well.

Another way to do it would be to invent and set new properties for del such as del.foo; this would also eliminate the need for the anonymous function.

Disclaimer: I haven't actually used either of these in my own code, but they seem worthy of further investigation.

I'm pretty sure peteb is talking about this.

Mikado

thanks! that's exactly what I was looking for.

for (var i = 0; i < document.links.length; i++) {
	document.links[i].addEventListener('click', (function(n) {
		return function (e) {
			e.preventDefault();
			alert(n);
		};
	})(i), false);
}

and to help clarify a few things as I am relatively new to this.

document.links[i].addEventListener('click', (function(n) { ... })(i), false);

here we are passing the argument (i) to the anonymous function, correct?

e.preventDefault();

this is canceling the default event for the element?

Yes, right.

This code was just an illustration, I don't advice to use it as is.

What I try first is to obtain the information I want from evt.target. Sometimes that will do the trick without passing extra stuff to the function.