5

以下有什么区别？

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

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

什么时候应该准确地使用每个函数？

4

3 回答 3

5

这两者的区别是

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

$(document).on("scroll",".wrapper1", ...)另一方面document，将向对象注册一个事件处理程序，并使用事件冒泡来调用处理程序，每当滚动发生在具有类 `wrapper` 的元素内时，它将支持动态添加元素。

所以什么时候更喜欢一种方法

如果您只有有限数量的元素并且它们不是动态添加的，您可以更喜欢第一种方法

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

于 2013-04-17T10:54:23.167 回答
1

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

您.on()在每种情况下都在使用，但在第二个版本中没有使用选择器。该事件在第一个实例中被委托，并在第二个实例中直接绑定。该.on()文档指出：

对于直接事件，

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

对于委托事件，

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

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

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

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

除此之外，该scroll事件不会冒泡，也不能被委派。但是，可以从.on()文档中再次委托它们：

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

所以唯一可行的版本是第二个！请参阅DevTools 控制台中的演示，document scroll输出永远不会出现。

于 2013-04-17T10:54:48.600 回答
0

不同之处在于，在第一种情况下，侦听器以文档为目标，因此，如果您在页面加载时没有 .wrapper1 并另外添加它（AJAX 或其他方式），事件仍将触发（因为文档始终存在） .

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

也就是说，仅当所选元素不是动态创建时才应使用第二个变体，而第一个变体则在相反的情况下使用。

于 2013-04-17T10:37:19.583 回答