jquery - $(document).on 和 $ ('#submit' ).on 之间的区别

Question

这个问题已经有答案了:

Direct vs. Delegated - jQuery .on() (6 个回答)

已关闭 8 年前。

请让我知道以下之间的区别。

我对此类操作很陌生。

 $('#myButton').on('click', function () {
            // Some code
        });

和

$(document).on('keyup', '#myButton', function () {
    // Some Code
});

和

$('#myButton').click(function () {
    //Some code
});

Answer 1

来自documentation

<小时/>

委派事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。通过选择在附加委托(delegate)事件处理程序时保证存在的元素，您可以使用委托(delegate)事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型- View - Controller 设计中 View 的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则该元素可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此可以安全地在此处附加事件，而无需等待文档准备就绪。

在表体中有 1,000 行的数据表上，此示例将处理程序附加到 1,000 个元素:

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

委托(delegate)事件方法仅将事件处理程序附加到一个元素(tbody)，并且事件只需要向上冒泡一级(从单击的 tr 到 tbody):

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

注意:委派事件不适用于 SVG。

<小时/>

另请参阅:

• Should all jquery events be bound to $(document)?
• Are there any drawbacks to listen events on document level in jQuery?
• Direct vs. Delegated - jQuery .on()