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

时间：2022-04-18 16:21:12

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这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。

随机推荐

  1. redis 在后台启动

    昨天在cmd窗口启动,窗口关闭,再次访问会报错,所以在次打开 首先你要安装服务:redis-server --service-install redis.windows.conf --loglevel ...

  2. C#异常处理性能测试

    异常处理性能测试 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq ...

  3. struts.xml框架

    1.首先在.jsp文件中<form action="/项目名称/login" method="post"> 2.然后浏览器会访问struts.xml ...

  4. &lbrack;转&rsqb;个人源码管理：如何在本机配置自己的SVN Repository &lpar;图解&rpar;

    本文转自:http://blog.csdn.net/wikijava/article/details/6245588 Repository 即源码的集中存放处,所有修改后提交的源码就是保存在这里,并在 ...

  5. 使用Visual Studio发布应用安装包

    安装包制作方式 使用Visual Studio进行应用的打包分发有两种方式: 1.使用Clickonce发布安装包: 2.使用Setup工程发布安装包. 操作步骤 Clickonce发布安装包 1.右 ...

  6. Linux技术修复

    今天在慕课网上学习了Linux的一些知识: 我使用命令: ***:~$ route add default gw 192.168.1.1 添加了一个网关:192.168.1.1之后的结果为: ***: ...

  7. git的使用说明详解

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001375840202368c7 ...

  8. WPF DataGrid 之数据绑定--实例2

    1.前台Grid定义 <!--数据绑定--> <DataGrid Grid.Row="1" Name="gridOne" Margin=&qu ...

  9. Android ViewManger解析 从ViewRoot 源码分析invalidate

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/48443429,作者:skay     通过学习了AndroidUI之绘图机基础知道 ...

  10. HTML 5核心内容

    demo飞象 HTML 5 系列文章索引:http://www.cnblogs.com/webabcd/archive/2012/05/27/2520567.html demo飞象HTML 5 (11 ...

相关文章