$(document).on('click','.classname',function(){}); VS $('.classname').on('click',function(){});

最新推荐文章于 2023-04-07 00:33:39 发布

转载最新推荐文章于 2023-04-07 00:33:39 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Syney/p/7840227.html

文章标签：

#javascript #ViewUI

本文深入解析jQuery中事件绑定的不同方式，对比$(document).on与$('.classname').on的区别，探讨其在效率上的差异，并分析事件委托的特性。同时，讨论了在页面刷新后，不同绑定方式对事件处理的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery中用on来绑定事件，经常的写法有
$(document).on('click','.classname',function(){});
$('.classname').on('click',function(){});

上面两种都是给类是classname的元素添加了click事件，那这两个写法有什么区别呢？在效率上哪个更好呢？

同样的，
$(document).on('click','#idname',function(){});
$('#idname').on('click',function(){});

这个是个id为idname的原始绑定click事件，这两种写法又有什么不同呢？

$(document).on是把事件委托到了document上，$('#idname').on是把事件委托到了元素上面

$(document).on是把事件委托到document上，$('className').on是把事件绑定到.className元素上。效率方面，直接绑定在元素上会更为高效，绑定在document上，每次document有点击动作，浏览器都会判断当前点击的对象，如果匹配，再决定要不要执行，多了一个判断的环节。但在目前开发中，JS渲染效率很高，所以此异同基本可以忽略不计。此外，针对$(document).on的触发特点，延伸一下，$("className").on为onclick绑定，只有在页面onload的时候执行一次，当页面刷新后，新加载的具有className的元素便没有事件绑定到上面了，相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。

转载于:https://www.cnblogs.com/Syney/p/7840227.html