13518219792
本篇文章主要是对jQuery中delegate和on的用法与区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
公司主营业务：成都网站设计、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出西峡免费做网站回馈大家。
在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是必需的。
click是点击事件，但是在页面加载完之后，jquery事件新添加的元素，用click的话是无法获取元素的，这个时候要用on去获取元素事件，简单的说页面加载完成时候页面显示的元素可以用on，也可以用click，但是页面加载完成之后后期再追加的元素只能用on。
两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。on(events,[selector],[data],fn)，参数[selector]是可选，
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
delegate的selector是必需的。
bind是用来绑定一个或多个事件的，live其实bind的一个加强版，用来绑定通过JavaScript或者jQuery添加的DOM元素事件，其语法结构是一样
123456$("p").bind("mouseenter mouseleave",function(){alert("ok");})$("p").live("mouseenter mouseleave",function(){alert("ok");})
delegate用于事件委托，也是绑定过JavaScript或者jQuery添加的DOM元素事件。
123$("div").delegate("p","click",function(){alert("p");})
点击div下面的P执行alert;
而on是在1.7之后新增的，是把bind,live,delegate全部合并在一起了，
123$("div").on("click","p",function(){ alert(1); })
不需要事件委托的时候把P去掉就会变成点击div触发了。
个人建议根据版本来使用，语法其实都差不多，如果你是用1.7版本以上就建议用on，毕竟bind，live，delegate这些将来都会遗弃了，如有错误，请指出。顺便吐槽一下楼上的回答，不走心啊
.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()
