.on（）函数调用之间的区别
以下有什么区别？
$(document).on("scroll",".wrapper1", function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); $('.wrapper1').on("scroll", function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); 什么时候应该准确使用每个function？
这两者之间的区别是
$('.wrapper1').on("scroll", ....)将scroll事件绑定到执行此语句时出现的那些元素，即是否动态添加任何带有类wrapper1新元素执行此语句后，将不会为这些元素执行事件处理程序。
$(document).on("scroll",".wrapper1", ...)将向document对象注册一个事件处理程序，并且只要在元素内发生滚动，就会使用事件冒泡来调用处理程序使用类`wrapper“，因此它将支持动态添加元素。
所以什么时候喜欢一种方法
如果您只有有限数量的元素并且它们不是动态添加的，那么您可以更喜欢第一种方法
如果您有很多元素或者动态添加这些元素，则首选第二种方法。
效果将是相同的，但事件处理程序交付事件的方式略有不同。
您在每种情况下都使用.on() ，但在第二个版本中未使用选择器 。 事件在第一个实例中委派 ，并直接绑定在第二个实例中。 .on()文档说明：
对于直接活动，
每次在所选元素上发生事件时调用handler，无论它是直接发生在元素上还是来自后代（内部）元素的气泡
对于委派活动，
当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）
发生的事情是当浏览器检测到事件时，它会使DOM冒泡。 在前进的每个元素上，jQuery将调用已附加的事件处理程序。 在第一个版本中，事件一直传播到document然后jQuery检查事件是否源自class="wrapper1"元素。 第二个版本，如果事件在class="wrapper1"元素上，事件将会提前停止冒泡。
另一个区别是，如果.wrapper1在页面加载完成后不存在 ，第一个版本仍然能够绑定事件处理程序，即如果元素是动态添加的，则第二个版本将不起作用。 当页面加载并且jQuery执行时， $('.wrapper1')可能不存在。
如果.wrapper1元素不是动态的，那么您可能会发现使用第二个版本的（可忽略的）性能优势。
除此之外， scroll事件不会冒泡并且无法委派。 但是，可以从.on()文档再次委派它们：
在所有浏览器中，加载，滚动和错误事件（例如，在元素上）不会冒泡。 在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。 这些事件不支持与委托一起使用，但是当事件处理程序直接附加到生成事件的元素时，可以使用它们。
所以唯一可行的版本是第二个！ 请参阅 DevTools控制台中的演示 ， document scroll输出永远不会出现。
区别在于侦听器瞄准文档的第一种情况，因此如果您在页面加载时没有.wrapper1并另外添加它（AJAX或其他方式），事件仍将触发（因为文档始终存在） 。
在第二种情况下，如果动态添加.wrapper1，事件将不会触发，即使您正在使用.on（），因为您没有要将.on（）绑定到的元素。
只有当动态创建所选元素并且相反情况下的第一个元素时，才应使用第二个变体。