javascript - Grid 的 jQuery 委托事件方法的好处

Question

假设我有一个网格/表格，其中包含大量数据，例如 1000 行和每行的事件处理程序......

现在有两种实现方式；

1.

$( "#dataTable tbody tr" ).on( "click", function() {}

和 2。

$( "#dataTable tbody" ).on( "click", "tr", function() {}

您能否解释一下这两种方法之间的基本区别以及它如何帮助渲染/性能......

Answer 1

阅读 .on()

由于 javascript 添加的新元素在 DOM 就绪或页面加载时不是 DOM 的一部分，因此您必须使用事件委托

这是事件委托

$("#dataTable tbody").on( "click", "tr", function() {

上面代码的解释

我们将事件处理程序附加到 iddataTable包含 tbody标签的元素，这样如果tr添加的元素dynamically多于clickevent 将在新添加的tr.

但是如果使用下面的代码，tr则不会click event handler附加新添加的代码。

---

如果元素在 DOM 就绪或页面加载时存在于 DOM 中，则下面的代码将起作用。

$( "#dataTable tbody tr" ).on( "click", function() {}

等于

$( "#dataTable tbody tr" ).click(function() {});

Answer 2

当匹配选择器的元素动态变化时，必须使用委托（方法2）。您应该仅在必要时为此目的使用它。它在选择器中应用到的元素上建立一个处理程序.on，然后必须测试目标元素是否与参数列表中的选择器匹配；这取决于从内部元素冒泡到您绑定到的元素的事件。这比直接绑定到目标元素效率低，因为浏览器完全由自己实现。

当元素是静态的时，应该使用第一种形式。当 DOM 准备好时，选择器匹配所有这些，并将处理程序绑定到它们中的每一个。