jQuery类选择器事件绑定是否将eventHandler附加到每个实例

Does jQuery class selector event binding attach eventHandler to each instance?

本文关键字：实例 eventHandler 选择器事件绑定是否 jQuery 更新时间：2023-09-26

我在学习jQuery，当我读到关于$('.className').bind('click',function(){})方法的文章时，产生了一个疑问。

这个方法是否将我的事件处理程序附加到DOM中className的每个实例？如果是这样的话，这会是一个好方法吗？比如将事件处理程序附加到页面上的许多实例是一种开销，对吧？

或者它是在使用事件委托——比如说，处理程序将绑定到某个通用的父级，该父级将使用e.target equalTo className并执行单击事件，从而使处理程序只绑定到一个DOM元素？

请帮我理解。谢谢

还有一个疑问。如果我将一个事件附加到每个dom元素，那么重载在哪里生效？它会在执行时给浏览器带来额外的负载吗？还是会使dom变重（我指的是解析dom的困难）？

它确实将回调绑定到这些元素中的每一个。如果有很多元素与选择器匹配，那么使用事件委派肯定会更好。

但是，您不必手动摆弄e.target。jQuery有专门针对这个场景的重载.on()方法：

$('#parent').on('click', '.children', function (){});

您应该始终将事件处理程序附加到尽可能接近的父级，以便受事件侦听器影响的元素数量最少。

$('.className').bind('click',function(){})确实将事件处理程序附加到dom中的每个可用元素。。。事件委派也有一些问题，比如它不需要只侦听目标元素中的事件，而是需要再次评估委派的父级中发生的所有单击事件委派目标选择器。。。

也就是说，如果有很多因素，我更喜欢活动代表团。。。。但是更喜欢将处理程序附加到最直接的公共祖先元素，而不是将其绑定到body或document