jQuery“* on click function *”

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，然后将事件委托给指定的回调。

这给出了两个实际差异：

• 添加了一个侦听器，而不是可能非常多（在某些情况下可以提高性能），
• 如果您将来动态添加更多tr，他们也会按照您的预期对click做出反应。

Answer 3

活动冒泡。这是您需要了解的主要内容。如果用户点击a内的p内的td内的tr内的table（依此类推），则点击事件将< em>冒泡每个元素并依次触发所有click事件侦听器。

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

这会选择#dataTable tbody元素来附加事件监听器，但它会过滤并仅对嵌套tr触发的事件做出反应。您也可以这样做：

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

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