jQuery的“*上点击功能*”

Question

我这个代码挣扎：

选择html元素，然后点击功能应用是什么tr目的后。

$("#dataTable tbody").on("click", "tr", function() { 
    alert($(this).text()); 
}); 

Answer 1

的TR的目的是为了说明什么，你会在#dataTable tbody选择内点击。尝试改变它到别的地方，看看它的行为有什么不同。

Answer 2

有之间细微的差别：

$("#dataTable tbody tr").on("click", callback); // 1 

和

$("#dataTable tbody").on("click", "tr", callback); // 2 

第一个选择每tr和单独调用每个addEventListener。

第二个只向tbody元素添加一个特殊事件侦听器。只要点击了内部的某个内容，此侦听器就会检查它是否为tr，然后将该事件委托给指定的回调。

这给了2个实际差别：

• 一个侦听器添加，而不是潜在的非常多（这可以提高在某些情况下的性能），
• 如果你添加更多tr小号动态的未来，他们也会像你期望的那样对click做出反应。

Answer 3

活动气泡。这是你需要理解的主要内容。如果用户点击a内部的p内部的td一个tr内部的table（等）内部，点击事件将每个冒泡这些元素的和触发反过来所有click事件侦听器。

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

此选择了#dataTable tbody元素附加事件监听器，但它会过滤，只反应以通过嵌套tr触发的事件。你也可以这样做，而不是：

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

但这将结合许多单独的事件监听器给每一位tr。这可能效率更低或者具有其他不良影响;例如，如果您不断添加或删除tr元素，则最终可能会有一些tr，它们将事件侦听器绑定到它们，而其他事件侦听器则没有。