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

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