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. find 递归/不递归 查找子目录的方法

    1.递归查找(find 命令 是递归遍历文件夹的) 命令:find . -name “*.txt” //当前路径下递归查找以.txt结尾的文件夹 2.不递归查找 find . -name “*.txt ...

  2. Myeclipse运行单个jsp页面

    点击窗口--->打开透视图--->其他 选中Web(WTP Extras) 如果没有这一项勾选 全部显示 应该是会生成一个Server文件夹

  3. Heroku发布前准备

    group :development, :test do gem 'byebug', platform: :mri gem 'sqlite3', '~> 1.3.13' end group :p ...

  4. Polar Code(1)极化码SC译码迭代公式的理解

    采用对数似然比求解的迭代公式推导: 考虑 如上图,将L的部分看为一个整体,用 exp(a)和exp(b)代替,并对式子左右都取对数,则公式变为如下所示: 对数似然比 上述公式等效一下公式: 进一步可等 ...

  5. Apache和Nginx运行原理解析

    Web服务器 Web服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务. 应用层使用HTTP协议. HTML文档格式. 浏览器统一资源定位器(URL). Web服 ...

  6. 贪吃蛇(简易版)Leslie5205912著

    # include <stdio.h># include <string.h># include <windows.h># include <stdlib.h ...

  7. Junit集成测试

    Spring4.x高级话题(七):Spring的测试 一. 点睛 测试是开发工作中不可缺少的部分,单元测试只针对当前开发的类和方法进行测试,可以简单通过模拟依赖来实现,对运行环境没有依赖:但是仅仅单元 ...

  8. Java多线程01(Thread类、线程创建、线程池)

    Java多线程(Thread类.线程创建.线程池) 第一章 多线程 1.1 多线程介绍 1.1.1 基本概念 进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于 ...

  9. spring aop做什么介绍

    1.AOP(Aspect Orient Programming),称为面向切面编程,它作为面向对象(OOP)的一种补充,用于处理系统中分布于各个模板的横切关注点,比如事务管理.日志.缓存等.AOP实现 ...

  10. unity导入TexturePacker处理

    1.从Asset Store里下载TexturePackerImporter ,然后导入到项目中. 2.导入unity的一张大图和一个.tpsheet文件(注意原始图片也要在相同目录) 3.代码导入 ...