Performance concerning events.

[shadowayex]

Let's say I have 20 elements that I want to perform the same type of event. For the sake of simple example, let's say these elements were all td elements who's innerHTML was a hex code of a color, and I wanted to have them change their background color to that hex code when clicked.There's two methods I can think of doing it this way. Both involve a loop, but method 1 would set the onclick to an anonymous function that does the color change, and method 2 would be to make a function that does the swap, and assign the onclick to perform that function. I don't really know the mechanics behind JavaScript, and I was wondering if, of these two methods, one would be better.What I'm mainly curious about is if JavaScript just makes copies of functions that you assign to events. For instance, if I chose method 2, would there be 20 separate functions assigned to the onclicks of the tds, like method one would seemingly do?I'm not sure if I'm making myself very clear. It's kind of hard to explain without actually coding something out. But I'm not too worried about the code. I'm more looking at the concept.If I need to explain further, please let me know.

[boen_robot]

JavaScript would make a copy of a reference to the function (one reference is a few bytes; different in every broser I think). On desktop computers, with today's GBs of RAM, this hardly matters, but it does on mobile and low end PCs.Events can bubble or capture though, so if the event handler is the same, instead of assigning it for every element, you can assign it to a higher element in the tree, and then just do the actions over the initiator of the event. Optionally, only if it satisfies certain conditions - in the example above, if you have certain cells that must not have this handler, you can check if the event was initiated from such a cell.

[shadowayex]

JavaScript would make a copy of a reference to the function (one reference is a few bytes; different in every broser I think). On desktop computers, with today's GBs of RAM, this hardly matters, but it does on mobile and low end PCs.Events can bubble or capture though, so if the event handler is the same, instead of assigning it for every element, you can assign it to a higher element in the tree, and then just do the actions over the initiator of the event. Optionally, only if it satisfies certain conditions - in the example above, if you have certain cells that must not have this handler, you can check if the event was initiated from such a cell.

Ah, that is clever =)What about the cases where events don't bubble? Whether it be by the event's design itself, or if bubbling was stopped by the developer?From what I interpret from your post, would it be better to make a function to set to the event in question, rather than making anonymous functions for each one, right? For the non-bubbling case, I mean. Or is there a better way all around?

[boen_robot]

If the event was stopped by the developer (i.e. you), then you are expected to know better. By default all events keep bubbling.All events always bubble (see linked article). They also always capure, but only in IE9+ and non-IE browsers.

[shadowayex]

Understandable.What about mouseenter/mouseleave. I know they aren't standard, but they are useful in certain cases, and there are a few code sample online of these being emulated in functions people wrote.