在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
blind()不能给创建的元素加事件，live()是通过事件委托加在document上所以不好，消耗性能，delegate()是通过事件委托加在给祖先元素上，on()方法的原理是什么，有什么优势？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先建议题主去看下jq的源码。
是新版jq废弃的功能，相当于的document版。
和...给你看一段jq的源码你就很清楚了（为简洁省略了部分代码）：
jQuery.fn.extend({
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
是和的底层实现，后两者是为了在特定场合简化代码或使代码可读性更强的快捷方式，或者说仅仅是为了保留历史兼容性而存在的东西。
而的基本功能则最终通过jQuery.event.add来实现：
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
还是建议题主读一下jq源码，不必通读，直接搜索你关注的关键字即可。这里不就jQuery.event.add做更多展开了。
实际上在常规用途上，你可以认为和的区别仅仅在于传参数方式不同而已，而则是一个进一步删除了冒泡绑定能力的版本。
（注：点击内文链接查看api文档）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果你使用jQuery比较新的版本，推荐使用.on取代以前所有的其它时间方法，因为底层的实现都是调用了.on方法，推荐看看这个文章：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。正文 jQuery事件绑定.on()简要概述及应用
jQuery事件绑定.on()简要概述及应用
发布时间： & 编辑：www.jquerycn.cn
前几天看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的，最后看源码发现bind()和delegate()都是由on()实现的，感兴趣的朋友可以了解下，或许本文对你有所帮助
.on( events [, selector ] [, data ], handler(eventObject) )一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。
在需要为较多的元素绑定事件的时候，优先考虑事件委托，可以带来性能上的好处。比如：
如上图，将click事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。
注意到.on()的描述中第二个可选参数：selector。如下图，添加了第二个参数，选择符button：
当事件冒泡到document对象时，检测事件的target，如果与传入的选择符（这里是button）匹配，就触发事件，否则不触发。
注意.on()也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。下面是官方文档的一个例子：
最后有一点，原先的live()方法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面我的例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，而事件冒泡的开销也可以减少。delegate()与on()同理，毕竟是用on()实现的：
您可能感兴趣的文章：jQuery中on()方法用法实例详解
转载 & & 作者：whazhl
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下
本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下：
一、jQuery on()方法的使用：
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
二、jQuery on()方法的优点：
1、提供了一种统一绑定事件的方法
2、仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()
三、与.bind(), .live(), .delegate()的比较：
1、其实.bind(), .live(), .delegate()都是通过.on()来实现的
代码如下:bind: function( types, data, fn ) {
&&&&&&& return this.on( types, null, data, fn );
&&& unbind: function( types, fn ) {
&&&&&&& return this.off( types, null, fn );
&&& live: function( types, data, fn ) {
&&&&&&& jQuery( this.context ).on( types, this.selector, data, fn );
&&& die: function( types, fn ) {
&&&&&&& jQuery( this.context ).off( types, this.selector || "**", fn );
&&& delegate: function( selector, types, data, fn ) {
&&&&&&& return this.on( types, selector, data, fn );
&&& undelegate: function( selector, types, fn ) {
&&&&&&& // ( namespace ) or ( selector, types [, fn] )
&&&&&&& return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
2、用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
3、不要再用.live()了，它已经不再被推荐了，而且还有许多问题
4、.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。
5、我们可以用.on()来代替上述的3种方法
四、jQuery on()方法的使用示例
1、绑定click事件，使用off()方法移除on()所绑定的方法
代码如下:$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
$("button").click(function(){
$("p").off("click");
2、多个事件绑定同一个函数
代码如下:$(document).ready(function(){
& $("p").on("mouseover mouseout",function(){
&&& $("p").toggleClass("intro");
3、多个事件绑定不同函数
代码如下:$(document).ready(function(){
& $("p").on({
&&& mouseover:function(){$("body").css("background-color","lightgray");},&
&&& mouseout:function(){$("body").css("background-color","lightblue");},
&&& click:function(){$("body").css("background-color","yellow");}&
4、绑定自定义事件
代码如下:$(document).ready(function(){
& $("p").on("myOwnEvent", function(event, showName){
&&& $(this).text(showName + "! What a beautiful name!").show();
& $("button").click(function(){
&&& $("p").trigger("myOwnEvent",["Anja"]);
5、传递数据到函数
代码如下:function handlerName(event)
& alert(event.data.msg);
$(document).ready(function(){
& $("p").on("click", {msg: "You just clicked me!"}, handlerName)
6、适用于未创建的元素
代码如下:$(document).ready(function(){
& $("div").on("click","p",function(){
&&& $(this).slideToggle();
& $("button").click(function(){
&&& $("&p&This is a new paragraph.&/p&").insertAfter("button");
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery中的on方法使用介绍
使用jquery的朋友对其中的on方法并不陌生吧，下面为大家介绍下此方法的具体使用，感兴趣的朋友可以参考下
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&
&meta http-equiv="Content-Type" content="text/charset=UTF-8" /&
&script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&title&&/title&
&input type="button" value="test" id="test"/&
&script type="text/javascript"&
$(function(){
$("#test").hello({
&script type="text/javascript"&
;(function($){
$.fn.hello = function(options){
var defaults = {"size":0},
opts = $.extend({},defaults,options),
play:function(options){
var _root =
_root.autoPlay();
_root.eventClick();
autoPlay:function(){
console.log("auto");
eventClick:function(){
//$("#test").on("click",{show:"dd"},function(e){
// console.log("click :" + e.data.show);
$("#test").on({
click:function(){
alert("click");
mouseenter:function(){
alert("enter");
mouseleave:function(){
alert("leave");
return this.each(function(){
show.play(opts);
})(jQuery);
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.031 (s). 10 q(s)jQuery中使用on注册事件带来的好处jQuery中使用on注册事件带来的好处方国正百家号头条不支持markdown语法，我原格式复制的，想看清楚的就复制到编辑器上看吧自从博客被黑了之后，就基本没碰它。最近一直在实习，跟着前辈们写了写项目，遇见了很多问题。虽然不是什么大的问题，但觉得还是需要记录下来的好。刚来公司看公司的做的项目都比较老旧 ，在Vue、Angular、react大行其道的今天，我们公司还在用Underscore.js。当然了，我并没有觉得它不好，只是觉得它不合适,准确的说，是不太适合我而已，还好最近听说前辈们准备要把以前的项目用vue翻写一遍，想想还是不错的。这下面是我一个月来遇见的问题，今天先说说jQuery的on事件。遇见的问题&当你需要从后台获取数据动态添加到文档中去，有需要给动态添加的元素注册相应的事件的时候，请使用$("某个元素").on()来完成。jQuery从1.9版本开始注册事件一般有三种形式，分别为- **$("某元素").click(func)**- **$("某元素[一般为父级元素]").delegate("某子元素,"click",func);**- **$("某元素[一般为父级元素]").on("某子元素","click",func);**后面两个的用法大同小异，具体的区别在于：&能用delegate的就不要吝啬，直接用on来代替。除了on能动态绑定事件外，我认为这才是最重要的#####说说我现在的需求当前我的html结构:```html//动态添加元素到这里```在完成ajax请求之后的httml结构```html今天08:52七年级1班开机【查看当前使用情况】13:02七年级1班关机【查看当前使用情况】```下面是服务器返回的json数据：```javascript{"timestamp": ,"status": 1,"msg": "OK","recordset": {"classstat": {"": [{"id": "50","class_name": "七年级1班","is_open": "1","hour": "08:52:22","time": "","day": "","created": " 10:31:51"}],"": [{"id": "49","class_name": "七年级1班","is_open": "0","hour": "18:23:46","time": "","day": "","created": " 19:03:32"},{"id": "48","class_name": "七年级1班","is_open": "1","hour": "13:40:18","time": "","day": "","created": " 18:21:46"},{"id": "47","class_name": "七年级1班","is_open": "0","hour": "13:02:36","time": "","day": "","created": " 13:38:17"},{"id": "46","class_name": "七年级1班","is_open": "1","hour": "08:49:27","time": "","day": "","created": " 13:00:36"}],"": [{"id": "45","class_name": "七年级1班","is_open": "0","hour": "17:59:50","time": "","day": "","created": " 08:47:25"},{"id": "44","class_name": "七年级1班","is_open": "1","hour": "09:01:29","time": "","day": "","created": " 17:57:50"}],"": [{"id": "43","class_name": "七年级1班","is_open": "0","hour": "14:52:47","time": "","day": "","created": " 15:17:48"},{"id": "42","class_name": "七年级1班","is_open": "1","hour": "13:19:37","time": "","day": "","created": " 14:50:47"},{"id": "41","class_name": "七年级1班","is_open": "0","hour": "13:03:24","time": "","day": "","created": " 13:17:36"},{"id": "40","class_name": "七年级1班","is_open": "1","hour": "10:58:14","time": "","day": "","created": " 13:01:24"},{"id": "39","class_name": "七年级2班","is_open": "0","hour": "09:16:22","time": "","day": "","created": " 09:40:27"},{"id": "38","class_name": "七年级2班","is_open": "1","hour": "08:44:18","time": "","day": "","created": " 09:14:22"}],"": [{"id": "37","class_name": "七年级2班","is_open": "0","hour": "14:09:12","time": "","day": "","created": " 15:28:21"},{"id": "36","class_name": "七年级2班","is_open": "1","hour": "10:54:11","time": "","day": "","created": " 14:07:12"},{"id": "35","class_name": "七年级2班","is_open": "0","hour": "10:30:15","time": "","day": "","created": " 10:41:18"},{"id": "34","class_name": "七年级2班","is_open": "1","hour": "08:49:04","time": "","day": "","created": " 10:28:15"}]}}}```可以看到，对于时间轴左面的年月日后台是放在json数据的键名里面的，所以我写了两层循环，大佬们别笑啊。下面是js代码```javascript$.ajax({url: window.location.origin + "/api/?q=json/school/remote_patrol/getclassStat&info={}",dataType: "jsonp",success: function (data) {//console.log(data.recordset);$.each(data.recordset.classstat, function (v1, k1) {//console.log(v1.toLocaleDateString());var now = new Date();var ti = now.getFullYear() + "-" + (parseInt(now.getMonth()) + 1) +"-" + now.getDate();if (ti == v1) {v1 = "今天";}var timeAx = $(" ");var demo = $("" + v1 + "");timeAx.append(demo);$.each(k1, function (v2, k2) {// console.log(k2);var isOpen = '';if (k2.is_open == 1) {isOpen = "开机";} else {isOpen = '关机'}var ul = $("" + k2.hour.slice(0, 5) +"" + k2.class_name +isOpen +"【查看当前使用情况】")timeAx.append(ul);})$(".left").append(timeAx);})}})```现在的问题是在添加之后我还需要在li标签上添加点击事件，再次发送一个ajax请求相应的各个班级的数据。因为考虑到ajax必须请求成功之后才会存在li标签这个节点，所以我开始的做饭是把这个事件放在上一个ajax完成之后，也就是sucess函数里面。这时候我导师过来了，瞅了两眼我的代码，摇了摇头，就问我没用过on来注册事件么，我当时知道有on这个方法，但是具体需要怎么用没有实战过。所以一脸蒙蔽，最后叫我试着无用，所以自己写了下面的一段代码；```javascript$(".bottom .left ").on("click", ".timeAx ul li a", function (e) {$.ajax({type: "get",url: window.location.origin + "gshll.com/blog",dataType: "jsonp",success: function (data) {for (var k in data.recordset) {//代码}}})})```之后发现查阅了相关资料，才知道on是利用事件委托的原理实现了动态注册事件的功能。以前觉得对于jq的事件注册很熟悉，却一直没有具体的运用，现在才发现，果不其然。&学到老，活到老啊本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。方国正百家号最近更新：简介:看娱乐事件，侃明星八卦作者最新文章相关文章