自从.on()添加以来，我一直在使用后面的函数，但我最近注意到相当多的答案使用前者。
$(ancestor).on(event, element, function() { ... })
:
$(element).on(event, function() { ... })
JSFiddle例子。
第一个示例将事件处理程序委托给DOM树的更高层。这意味着它可以附加到DOM中的元素(ancestor)，但适用于可能尚未在DOM中的后代(element)。
第二个示例将事件处理程序直接附加到element，这意味着在代码运行时该元素必须存在于DOM中。
委派具有效率方面的额外优势。假设您希望将事件处理程序绑定到一个大列表中的每个li元素。将单个处理程序绑定到父ul，再委托给li元素，要比绑定同一函数的多个副本高效得多。
委托之所以有效，是因为大多数DOM事件从它们所处的元素(目标)向上冒泡。在前面提到的li示例之后，考虑以下代码:
$("#myList").on("click", "li", function () { /* Do stuff */ });
当单击#myList的后代时，将生成一个click事件，并从该元素向上冒泡到#myList(这是一个轻微的简化-事件的另一个阶段称为"捕获"，但这在这里并不重要)。绑定到#myList的事件处理程序将被触发，jQuery将检查目标元素是否与选择器匹配。如果是，则执行处理程序。
给我你的第一个:
$(ancestor).on(event, element, function() { ... })
在动态加载或创建元素时使用。直接将事件绑定在这些元素上是行不通的，所以需要将事件委托给离它最近的父元素，这在页面加载时是可用的，$(document)是其中一个总是可用的来委托事件。
你的第二个:
$(element).on(event, function() { ... })
这是一个直接绑定元素的事件，但这将适用于在页面加载时存在的元素。