Question

以下是什么区别？

$(document).on("scroll",".wrapper1", function(){
   $(".wrapper2")
    .scrollLeft($(".wrapper1").scrollLeft());
});  

$('.wrapper1').on("scroll", function(){
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft());
});

何时应该准确使用每个功能？

Answer 1

这两者之间的区别是

$('.wrapper1').on("scroll", ....)仅将滚动事件绑定到执行此语句时出现的那些元素，即如果在执行此语句后动态添加任何具有类wrapper1的新元素，则不会为这些元素执行事件处理程序。

另一方面，

$(document).on("scroll",".wrapper1", ...)将向document对象注册一个事件处理程序，并且只要在具有类`wrapper``的元素内发生滚动，就会利用事件冒泡来调用处理程序，所以它将支持动态添加元素。

所以何时选择方法

如果你只有有限数量的元素并且它们没有动态添加，你可以选择第一种方法

如果你有很多元素或者动态添加这些元素，则首选第二种方法。

Answer 2

效果将是相同的，但事件处理程序交付事件的方式略有不同。

您在每种情况下都使用.on()，但在第二个版本中未使用选择器。该事件在第一个实例中是委派，在第二个实例中是直接绑定。 .on()文档声明：

对于直接事件，

每次在所选元素上发生事件时都会调用
处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的气泡

对于委派的事件，

当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）

当浏览器检测到某个事件时，会发生DOM。在上升的每个元素上，jQuery将调用已附加的事件处理程序。在第一个版本中，事件一直传播到document，然后jQuery检查事件是否源自class="wrapper1"元素。第二个版本，如果事件在class="wrapper1"元素上，事件将会提前停止冒泡。

另一个不同之处在于，当页面加载完成后，如果.wrapper1 不存在，第一个版本仍然能够绑定事件处理程序，即如果元素是动态添加的第二个版本不起作用。当页面加载并且执行的jQuery $('.wrapper1')可能不存在时。

如果.wrapper1元素不是动态的，那么您可能会发现使用第二个版本的（可忽略的）性能优势。

除此之外，scroll event does not bubble并且无法委派。但是，可以从.on()文档中再次委派它们：

在所有浏览器中，加载，滚动和错误事件（例如，在元素上）不会冒泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。这些事件不支持与委托一起使用，但是当事件处理程序直接附加到生成事件的元素时，可以使用它们。

所以唯一可行的版本是第二个版本！在DevTools控制台中See demo，document scroll输出永远不会出现。

Answer 3

区别在于侦听器瞄准文档的第一种情况，因此如果您在页面加载时没有.wrapper1并另外添加它（AJAX或其他方式），事件仍将触发（因为文档是总是在那里。

在第二种情况下，如果动态添加.wrapper1，事件将不会触发，即使您正在使用.on（），因为您没有要将.on（）绑定到的元素。

如果没有动态创建所选元素并且相反情况下的第一个元素，则应该使用第二个变体。

.on（）函数调用之间的区别

3 个答案: