将事件绑定到jquery中的更多svg元素时，对性能有什么影响？

Question

I am binding mousemove event to each svg element(path, circle,etc,.) to get individual information for each elements (like tooltip ,obj info) . is it effect the performance ?

JS:

var elements = $(this.GroupEle).children();
for (var j = 0; j < elements.length; j++) { //length may be 5000
    $(elements[j]).index = i;
    $(elements[j]).collection = objCollection;
    // performance issue ??????????????
    $(elements[j]).bind('mousemove', this.pointonChartMove);
}

I need to pass different data to handler for each element.

for (var j = 0; j < elements.length; j++) { //length may be 5000
    //need to pass index and collection data to handler 
    $(elements[j]).index = i;
    $(elements[j]).collection = objCollection;
    $(elements[j]).bind('mousemove', this.pointonChartMove);
}

Pls suggest any other to achieve this????

Answer 1

Depending on the number of child elements you could see quite a performance hit. You could use a single delegated event handler on a parent element to help the situation:

$(this.GroupEle).on('mousemove', '.child-selector', this.pointonChartMove);

You would obviously need to change .child-selector to something relevant to your code.