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. 2.mongoDB add user in v3.0 问题的解决（Property 'addUser' of object admin is not a func）

    问题:创建mongodb帐户时,出错 > db.addUser('jyu', 'aerohive')  2015-08-05T20:03:02.767+0800 E QUERY    TypeE ...

  2. C++ explicit关键字详解

    本文系转载,原文链接:http://www.cnblogs.com/ymy124/p/3632634.html 首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用 ...

  3. angularjs---select使用---默认值及联动

    angularjs---select使用---默认值及联动   代码 一. select设置默认显示内容&&获取下拉框显示内容. HTML <div> <select ...

  4. javaScript的call关键字

    function add(a, b) { alert(a + b); } function sub(a, b) { alert(a - b); } add.call(sub,3,1); //这个例子中 ...

  5. UDK游戏开发基础命令

    编译 增量重新编译Debug版本UnrealScript脚本     UDK.exe make -debug 增量重新编译Release版本UnrealScript脚本    UDK.exe make ...

  6. Mybatis实现数据的增删改查（CRUD）

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBat ...

  7. UC浏览器 分享到朋友圈和微信好友 分类： JavaScript 2015-04-28 14:45 615人阅读 评论(1) 收藏

    用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaim ...

  8. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  9. 【leetcode】Factorial Trailing Zeroes

    题目描述: Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be ...

  10. Could not open Selected VM debug port (8700) (转)

    Could not open Selected VM debug port (8700) 2014年11月14日 ⁄ 综合 ⁄ 共 446字 ⁄ 字号 小 中 大 ⁄ 评论关闭   在运行项目的时候, ...