JQuery API中定义的on方法，专业名词很多，读起来并不是那么容易，而对于开发人员知道函数怎么使用就可以了。本文将JQuery的说明翻译如下：

on(events,[selector],[data],fn)

events:事件名，必写参数

[selector]:子元素选择器名，选填参数

[data]:事件触发时，传入函数的参数，可通过event.data对象获取，选填参数

fn:事件触发时所执行的动作，必写参数

示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
 $("#fatherDiv").on("click","#sonBtn",{id:1,name:"john"},function(event){
  var name = event.data.name;
  console.log("name == " + name);
 });
});
</script>
</head>
<body>
 <div  id ="fatherDiv" style="width:200px; height:200px;">
  <button id="sonBtn">按钮</button>
 </div>
</body>
</html>

点击div中的button按钮会触发click事件，在事件函数中通过event.data.key获取对象中key的对应value值。

JQuery中on()函数详解的更多相关文章

  1. JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  2. 【转】linux 中fork()函数详解

    在看多线程的时候看到了这个函数,于是学习了下,下面文章写的通俗易懂,于是就开心的看完了,最后还是很愉快的算出了他最后一个问题. linux 中fork()函数详解 一.fork入门知识 一个进程,包括 ...

  3. Jquery之each函数详解

    最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...

  4. Linux中fork()函数详解（转载）

    linux中fork()函数详解 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事, ...

  5. jQuery中 $.ajax()方法详解

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  6. C++中重载函数详解

    函数的重载详解 什么时函数重载: 函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数.重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,避 ...

  7. jQuery.fn.extend() 函数详解

    jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型 ...

  8. php中magic_quotes_gpc函数详解

    magic_quotes_gpc函数在php中的作用是判断解析用户提示的数据,如包括有:post.get.cookie过来的数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊 ...

  9. python unittest框架中addCleanup函数详解

    接上一篇doCleanups说明,这次介绍下另一个很好用的函数:addCleanup 还是老规矩,看官方文档说明: addCleanup(function, *args, **kwargs)¶ Add ...

随机推荐

  1. SpringMVC Controller介绍

    SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...

  2. 一条代码解决各种IE浏览器兼容性问题

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...

  3. linux常用命令-权限管理命令

    chmod  [{ugoa}{+-=}{rwx}] [文件或目录] [mode=421] [文件或目录] -R 递归修改 例:chmod g+w,o-r 文件或目录 但是一般用数字配置权限,例:chm ...

  4. WebStrom快捷键

    WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑 ...

  5. ng-bind 与ng-model区别

    双向绑定,一般来说是这样 <input ng-model="object.xxx"> <span ng-bind="object.xxx"&g ...

  6. Android studio 显示代码行号 设置

    首先我们打开我们的Android Studio.   这时会弹出setting页面,我们选择show line numbers然后点击确定按钮.   此时我们就可以看到代码左侧显示出行号了   我们可 ...

  7. .NET LINQ查询操作中的类型关系

    LINQ 查询操作中的类型关系      若要有效编写查询,您应该了解完整的查询操作中的变量类型是如何全部彼此关联的. 如果您了解这些关系,就能够更容易地理解文档中的 LINQ 示例和代码示例. 另外 ...

  8. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  9. Oracle行转列、列转行的Sql语句总结(转)

    多行转字符串 这个比较简单,用||或concat函数可以实现 select concat(id,username) str from app_userselect id||username str f ...

  10. oracle数据库创建后要做的事情

    在SQL Plus工具中(oracle自带)用conn /as sysdba登录数据库. 一:先新建用户 create user test01 identified by test02(test01为 ...