jQuery中delegate和on的用法与区别详细解析
本篇文章主要是对jQuery中delegate和on的用法与区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
创新互联主要从事网站设计制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务定西,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
在jQuery1.7中
.delegate()已被.on()取代。对于早期版本，它仍然使用事件委托的最有效手段。
在事件绑定和委派，delegate()和on在一般情况下，这两种方法是等效的。
.delegate()
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
代码如下:
//
jQuery
1.4.3+
$(
elements
).delegate(
selector,
events,
data,
handler
);
//
jQuery
1.7+
$(
elements
).on(
events,
[selector],
data,
handler
);
例如：.delegate()
code:
代码如下:
$("table").delegate("td","click",function(){
alert("hello");
});
.on()
code:
代码如下:
$("table").on("click",
"td",
function()
{
alert("hi");
});
PS:
两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如
复制代码
代码如下:
$("table").delegate("button","click",function(){...});
$("table").on("click",
"p",
function(){...});
就不起作用，因为正常情况下，table子元素应为tr,td...
on(events,[selector],[data],fn)，参数[selector]是可选，
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如：
代码如下:
$("table").on("click",
".td1",
function()
{
alert("hi");
});
过滤class为td1的table子元素
而delegate的selector是必需的。
jQuery绑定事件on
jQuery中用on来绑定事件，常用写法
两种写法哪个更好？
1. $(document).on 将事件委托document， $('#idname').on 将事件绑定到.className元素上。每次document有点击动作，浏览器都会判断当前点击的对象。如果匹配再决定要不要执行，多了个判断环节。JS渲染效率很高，所以此异同基本可以忽略。
2. $("className").on 为onclick绑定，只有在页面onload时执行一次。页面刷新后，新加载的具有className的元素便没有事件绑定到上面了。相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。
jQuery()中，on（）方法
概述
1、#Grid1Table不是#conut的父节点，p标签是#logout的父节点
2、代码写法：
$('p').on('click', '#count', function() {
//function code here.
});
解析
1、p包裹a标签（id = logout），所以logout的父节点（父标签）为p（没有标注id或者class）
pa href='#' id='logout'【退出】/a/p
2、$("#logout").on('click',function() 方法要求参数为非随动变量（全局变量），所以#logout为不可行参数，且由于代码没有贴全所以这里我先断定#Grid1Table为非父节点，而p为#logout父节点，所以这里可以改成：
$('p').on('click', '#count', function() {
//function code here.
});
拓展内容
juqery on()方法详解
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
参数
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
jQuery on方法传递参数示例
教你如何给
jQuery
on方法绑定的函数传递参数，代码如下：
复制代码
代码如下:
$(".loadingFlower").on("click",'',{name:"123",id:"234",tel:"345"},callback)
function
callback(event){
console.log(event.data.name);
//参数1
=123
console.log(event.data.id);
//参数2
=234
console.log(event.data.tel);
//参数3
=345
}
jquery on 的用法
.on()方法事件处理程序到当前选定的jQuery对象中的元素。
.on( events [, selector ] [, data ], handler(eventObject) )
events：类型: String
一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector：类型: String
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
data：类型: Anything
当一个事件被触发时，要传递给事件处理函数的event.data。
handler(eventObject)：类型: Function()
事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。
jQuery中的bind()函数跟on()函数有什么区别呢？
.bind()与.on()的区别：
（1）是否支持selector这个参数值。由于javascript的事件冒泡特性，如果在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。
如果使用on的时候，不设置selector，那么on与bind就没有区别了。
（2）on绑定的事件处理函数，对于未来新增的元素一样可以的，和delegate效果相同，而bind则不行。
（3） delegate用法与on()相同，只是参数的顺序不同：
扩展资料：
.bind()与.on()的实际应用：
1.bind()是直接绑定在元素上 ，将一本地地址与一套接口捆绑。如无错误发生，则bind()返回0。否则的话，将返回-1，应用程序可通过WSAGetLastError()获取相应错误代码。
用于事件处理程序
function ClassName(){
this.eventHandler = (function(){
}).bind(this);
}
2.on()则实现事件代理, 可以在匹配元素上绑定一个或者多个事件处理函数。
（1） 用来绑定多事件,并且为同一函数，如：
$('div').on('click mouseover',function(){
//do sth
});
（2）多个事件绑定不同函数，如：
$('div').on({
'click':function(){
//do sth
},
'mouseover':function(){
//do sth
}
});
（3）事件代理，如：
html:
button id="bt1"按钮1/button
jq:
$('#bt1').on('click',function(){
$('body').append('button按钮2/button');
});
$('body').on('click','.bt2',function(){
console.log('这是bt2');
}
参考资料：百度百科-bind()
本文题目：jqueryon用法,jquery on方法原理
链接分享：
http://www.cdkjz.cn/article/dsdcpgg.html
