表行单击事件与链接

table rows click event verses links

本文关键字：链接 事件 单击      更新时间：2023-09-26

我在一个表中有大约 3000 行。 显示集合的一些数据。 例如用户的集合。 我在行中有名字，姓氏，父亲的名字。

user1First  user1Last  user1Father 
user2First  user2Last  user2Father 
user3First  user3Last  user3Father

我需要一个导致查看用户完整详细信息的操作。 我有三个选择——

  1. 将单击事件绑定到各个行。

    1. 使用 jquery 或
    2. 点击属性

  2. 将一键式事件绑定到整个表并使用事件冒泡

  3. 向行添加链接列

从性能的角度来看，以上三者中哪一个是最便宜和最便宜的。 有没有其他方法可以实现这一目标并且性能友好。？

性能标准 -

  1. 速度是最重要的。

    1. 将行添加到表时没有 UI 阻塞。 - 当它们从服务器到达时使用jquery附加时，我异步添加它们
    2. 解除绑定时间也很重要，因为我在删除视图时会清理所有事件。

  2. 内存是次要的，但不容忽视，因为我也在移动设备上运行该应用程序。

附加说明 ：我正在使用骨干网.js。用于事件绑定。每一行本身都是一个主干视图[如果我使用链接，可以删除]这是一个木偶收藏视图

不要忘记，无论您是否在 DOM 树的更高位置附加了事件处理程序，事件都会冒泡。

委托事件的主要性能批评是针对并不总是触发的事件绑定。 例如，如果您将委托事件附加到表中，并且某些行符合选择器，而其他一些行不符合，则每次事件在表中冒泡时，您都将因检查 CSS 选择器而付出性能损失，无论该行是否符合规定的条件。

如果附加委派处理程序，则是否会产生性能影响以及影响程度取决于选择器。 例如，如果您的选择器是"td"，则检查是一个步骤过程：e.target.tagName === 'TD' 。 但是，如果您的选择器是"tr"，则检查涉及取消引用e.target的父元素，以发现是的，该元素是"tr"并且事件将触发。

在大多数情况下，绑定在事件

源附近且通常在事件发生时与选择器匹配的委派事件不会对性能造成太大影响。 通常，在这些情况下，代码简单性和内存使用量将胜过，您应该使用委派。

毫无疑问，将点击事件附加到表并使用事件冒泡是最佳选择。这在速度和内存方面都是有效的。

如果单击链接时触发 ajax 请求，则向列添加链接将与第一个选项相同。

相关文章：