javascript - 将事件绑定到 jquery 中的更多 svg 元素时是否有任何性能影响？

Question

我将 mousemove 事件绑定到每个 svg 元素（路径、圆圈等）以获取每个元素的单独信息（如工具提示、obj 信息）。是否影响性能？

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);
}

我需要将不同的数据传递给每个元素的处理程序。

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);
}

请建议任何其他来实现这一目标？？？？

Answer 1

根据子元素的数量，您可能会看到相当大的性能影响。您可以在父元素上使用单个委托事件处理程序来帮助解决这种情况：

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

您显然需要更改.child-selector为与您的代码相关的内容。