jquery中$(document).on的一些疑惑

[learn511]

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是把事件委托到了元素上面，那应该是后一种比较好，这种理解是对的吗？

[似梦飞花]

貌似就是你说的那样 不过好不好得看情况了啊

[learn511]

引用 1 楼 zzgzzg00 的回复:

貌似就是你说的那样 不过好不好得看情况了啊

看情况是什么情况？

[zhjdg]

$(document).on是把事件委托到了document上 对的。 $('#idname').on是把事件委托到了元素上面 错的。 事件直接帮到#idname $('.classname').on('click',function(){}); 每一个有.classname的元素，绑一个click事件。 所以用$(document).on('click','.classname',function(){}); 比较好，

[learn511]

引用 2 楼 u012481201 的回复:

[quote=引用 1 楼 zzgzzg00 的回复:] 貌似就是你说的那样 不过好不好得看情况了啊

看情况是什么情况？[/quote] 那这个委托到document和直接绑定是什么差别呢？ $(document).on('click','.classname',function(){}); 这种就是只绑定了一个事件，绑定到了document对象，这样理解对吗？ 那如果是只对某个id元素绑定事件，$('#idname').on('click',function(){});这种是不是就更好呢？

[zhjdg]

像 绑的： document.onclick = function(e){ if(e.className == 'classname') { dofunction; } } 不绑的； classname 有elem1,elem2,elem3 elem1.onclick = dofunction; elem2.onclick = dofunction; elem3.onclick = dofunction;

[qq_31292383]

在效率方面,个人觉得直接绑在元素上面要高些,毕竟绑在document上,每次document有点击动作,浏览器就会判断你当前点击的对象,如果匹配,然后才决定要不要执行,多了一个判断的环节,但是在一般开发中,js执行效率很高,这个判断动作很快,个人觉得影响不是很大,以上纯属个人看法

[Simon_9527]

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

区别：$('#idname').on 当页面动态刷新时，新加载的该id元素便没有事件绑定到上面了。 而第一个还可以让事件生效。例如：
$(document).on("click","#dynamicEle", function(e){
alert("some thing");
});
当dynamicEle动态刷新后事件还在。如果用onclick绑定则事件不存在了，因为onclick只在页面onload的时候执行一次，刷新后的dynamicEle已经不是原来的dynamicEle了。

[箫沐予]

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