正文 jQuery事件绑定.on()简要概述及应用
jQuery事件绑定.on()简要概述及应用
发布时间： & 编辑：
前几天看到事件委托的时候，关于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操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到园友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。
　　bind()向匹配元素添加一个或多个事件处理器。
　　$(selector).bind(event,data,function)
　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
　　　　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);
　　　　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);
　　　　　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　
　　　　　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
　　　　　　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　&&
　　data：可选；需要传递的参数；
　　function：必需；当绑定事件发生时，需要执行的函数；
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&jquery中bind()绑定事件方式&/title&
&style type="text/css"&
.container
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
&script src="js/jquery-1.8.0.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
/*********添加单个事件处理*********/
$(".btn-test").bind("click", function () {
//显示隐藏div
$(".container").slideToggle();
/********添加多个事件处理********/
//空格相隔方式
$(".btn-test").bind("mouseout click", function () {
//显示隐藏div
$(".container").slideToggle();
//大括号替代方式
$(".btn-test").bind({
"mouseout": function () {
alert("这是mouseout事件!");
"click": function () {
$(".container").slideToggle();
/********删除事件处理********/
$(".btn-test").unbind("click");
53 &/head&
&input type="button" value="按钮" class="btn-test" /&
&div class="container"&
58 &/body&
59 &/html&
适用Jquery版本
　　适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。
　　live() 向当前或未来的匹配元素添加一个或多个事件处理器；
　　$(selector).live(event,data,function)
　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
　　　　　　单事件处理：例如 $(selector).live("click",data,function);
　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).live("click dbclick mouseout",data,function);
　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).live({event1:function, event2:function, ...})　
　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
　　　　　　　　　　　　 &&大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　&&
　　data：可选；需要传递的参数；
　　function：必需；当绑定事件发生时，需要执行的函数；
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&jquery中live()绑定事件方式&/title&
&style type="text/css"&
.container
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
&script src="js/jquery-1.8.0.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
/*********添加单个事件处理*********/
$(".btn-test").live("click", function () {
//显示隐藏div
$(".container").slideToggle();
/********添加多个事件处理********/
//空格相隔方式
$(".btn-test").live("mouseout click", function () {
//显示隐藏div
$(".container").slideToggle();
//大括号替代方式
$(".btn-test").live({
"mouseout": function () {
alert("这是mouseout事件!");
"click": function () {
$(".container").slideToggle();
/********删除事件处理********/
$(".btn-test").die("click");
54 &/head&
&input type="button" value="按钮" class="btn-test" /&
&div class="container"&
59 &/body&
60 &/html&
适用Jquery版本
　　jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。
delegate()
　　delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
使用方式　
　　$(selector).delegate(childSelector,event,data,function)
　　childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元素；
　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
　　　　　　单事件处理：例如 $(selector).delegate(childselector,"click",data,function);
　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})　
　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
　　　　　　　　　　　　 &&大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　&&
　　data：可选；需要传递的参数；
　　function：必需；当绑定事件发生时，需要执行的函数；
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&jquery中delegate()绑定事件方式&/title&
&style type="text/css"&
.container
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
&script src="js/jquery-1.8.0.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
/***********单元素添加单事件***********/
//按钮绑定单击事件 实现div的显示隐藏
$(".header").delegate("#btn-test1", "click", function () {
$(".container").slideToggle();
/***********单元素添加多事件***********/
//空格相隔方式
$(".header").delegate("#btn-test1", "click mouseout", function () {
$(".container").slideToggle();
//大括号替代方式
$(".header").delegate("#btn-test1", {
"mouseout": function () {
alert("这是mouseout事件!");
"click": function () {
$(".container").slideToggle();
51 &/head&
&div class="header"&
&input type="button" value="按钮1" class="btn-test" id="btn-test1" /&
&input type="button" value="按钮2" class="btn-test" id="btn-test2" /&
&div class="container"&
59 &/body&
60 &/html&
适用Jquery版本
　　jquery1.4.2及其以上版本；
　　on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
使用方式　
　　$(selector).on(event,childselector,data,function)
　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
　　　　　　单事件处理：例如 $(selector).on("click",childselector,data,function);
　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);　
　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
　　　　　　　　　　　　 &&大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　
　　childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；　　&&
　　data：可选；需要传递的参数；
　　function：必需；当绑定事件发生时，需要执行的函数；
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&jquery中on()绑定事件方式&/title&
&style type="text/css"&
.container
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
&script src="js/jquery-1.8.0.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
/*********添加单个事件处理*********/
$(".header").on("click", ".btn-test", function () {
//显示隐藏div
$(".container").slideToggle();
/********添加多个事件处理********/
//空格相隔方式
$(".header").on("mouseout click", ".btn-test", function () {
//显示隐藏div
$(".container").slideToggle();
//大括号替代方式
$(".header").on({
"mouseout": function () {
alert("这是mouseout事件!");
"click": function () {
$(".container").slideToggle();
}, ".btn-test");
//删除事件
$(".header").off("click", ".btn-test");
53 &/head&
&div class="header"&
&input type="button" value="按钮" class="btn-test" /&
&div class="container"&
60 &/body&
61 &/html&
适用Jquery版本
　　jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；
四种方式的异同和优缺点
　　1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;
　　2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下:
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&jquery中四种方式给未来元素设置事件&/title&
&style type="text/css"&
.container
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
&script src="js/jquery-1.8.0.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
//利用bind()方法，给P标签设置click方法
======失败 没有任何反应=======
$(".container p").bind("click", function () {
alert("bind()添加单击事件成功!");
//利用live()方法.给P标签设置click方法
=======成功调用方法============
$(".container p").live("click", function () {
alert("live()添加单击事件成功!");
//利用delegate()方法.给P标签设置click方法
=======成功调用方法============
$(".container").delegate("p", "click", function () {
//显示隐藏div
alert("delegate()添加单击事件成功!");
//利用on()方法.给P标签设置click方法
=======成功调用方法============
$(".container").on("click", "p", function () {
//显示隐藏div
alert("on()添加单击事件成功!");
//按钮添加P标签
$(".btn-test").click(function () {
$(".container").append("&p&这是新增的段落!&/p&");
51 &/head&
&input type="button" class="btn-test" value="添加元素" /&
&div class="container"&
56 &/body&
57 &/html&
2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以
　用来代替live()函数，live()函数在1.9版本已经删除；
3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些，想了解具体情况，请戳这：
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；　
　　如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替，以上仅为个人看法，如有不同想法，欢迎拍砖交流。
阅读(...) 评论()posts - 1,&
comments - 0,&
trackbacks - 0
用&on&函数为一个新增的按钮绑定了一个事件，这是事件会触发多次。
&meta name="viewport" content="width=device-width" /&
&title&码上飘&/title&
&script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javascript"&&/script&
$(function(){
$('#btn1').click(function () {
$('#btnBind').on('click',function () {
alert(123);
&input id="btn1" type="button"
value="确认" /&
&input id="btnBind" type="button" value="绑定按钮" /&
&如上面的代码，如果你点击多次'btn1'按钮，那么就会绑定多少次click事件到'btnBind'按钮上，on是绑定多少次就触发多少次的。
解决方案：
& 1.要想它只绑定一次，可以先'off'解绑然后再'on'。
$('#btnBind').off('click').on('click',function () {
alert(123);
　2.执行一次后解绑unbind()
$('#btn1').click(function () {
$('#btnBind').on('click',function () {
alert(123);
$("#btnBind").unbind("click")
阅读(...) 评论()织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
跟版网(www.genban.org)是专业的DEDECMS模板下载和定制开发服务商！
jquery on事件jquery on实现绑定多个事件
& &以下内容您可能感兴趣： &
API上jquery on介绍on(events,[selector],[data],fn)概述在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see&.bind(),&.delegate(), 和&.live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()参数events,[selector],[data],fnV1.7events:一个或多个用空格分隔的事件类型和可选的命名空间，如&click&或&keydown.myPlugin& 。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的& null或省略，当它到达选定的元素，事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。events-map,[selector],[data]V1.7events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。示例描述:Display a paragraph's text in an alert when it is clicked:$(&p&).on(&click&, function(){ alert( $(this).text() ); });Pass data to the event handler, which is specified here by name:function myHandler(event) { alert(event.data.foo); } $(&p&).on(&click&, {foo: &bar&}, myHandler)Cancel a form submit action and prevent the event from bubbling up by returning false:$(&form&).on(&submit&, false)Cancel only the default action by using .preventDefault().$(&form&).on(&submit&, function(event) { &event.preventDefault(); });Stop submit events from bubbling without preventing form submit, using .stopPropagation().$(&form&).on(&submit&, function(event) { &event.stopPropagation(); });jQuery on()方法是官方推荐的绑定事件的一个方法。$(selector).on(event,childSelector,data,function,map)由此扩展开来的几个以前常见的方法有.bind()　　$(&p&).bind(&click&,function(){　　　　alert(&The paragraph was clicked.&);　　});　　$(&p&).on(&click&,function(){　　　　alert(&The paragraph was clicked.&);　　});delegate()　　$(&#div1&).on(&click&,&p&,function(){　　　　$(this).css(&background-color&,&pink&);　　});　　$(&#div2&).delegate(&p&,&click&,function(){　　　　$(this).css(&background-color&,&pink&);　　});live()　　$(&#div1&).on(&click&,function(){　　　　$(this).css(&background-color&,&pink&);　　});　　$(&#div2&).live(&click&,function(){　　　　$(this).css(&background-color&,&pink&);　　});以上三种方法在jQuery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。$(document).ready(function(){　　$(&p&).on(&click&,function(){　　　　$(this).css(&background-color&,&pink&);　　});　　$(&button&).click(function(){　　　　$(&p&).off(&click&);　　});});tip:如果你的事件只需要一次的操作，可以使用one()这个方法$(document).ready(function(){　　$(&p&).one(&click&,function(){　　　　$(this).animate({fontSize:&+=6px&});　　});});trigger()绑定$(selector).trigger(event,eventObj,param1,param2,...)$(document).ready(function(){　　$(&input&).select(function(){　　　　$(&input&).after(& Text marked!&);　　});　　$(&button&).click(function(){　　　　$(&input&).trigger(&select&);　　});});多个事件绑定同一个函数$(document).ready(function(){& $(&p&).on(&mouseover mouseout&,function(){& & $(&p&).toggleClass(&intro&);& });});多个事件绑定不同函数$(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&);} && });});绑定自定义事件$(document).ready(function(){& $(&p&).on(&myOwnEvent&, function(event, showName){& & $(this).text(showName + &! What a beautiful name!&).show();& });& $(&button&).click(function(){& & $(&p&).trigger(&myOwnEvent&,[&Anja&]);& });});传递数据到函数function handlerName(event)&{& alert(event.data.msg);}$(document).ready(function(){& $(&p&).on(&click&, {msg: &You just clicked me!&}, handlerName)});适用于未创建的元素$(document).ready(function(){& $(&div&).on(&click&,&p&,function(){& & $(this).slideToggle();& });& $(&button&).click(function(){& & $(&&p&This is a new paragraph.&/p&&).insertAfter(&button&);& });});前几天在看《jquery基础教程》，看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的。然后在一处看到live()已经被移除了，囧，然后去看了最新的jq源码，果然被移除了，现在是1.9.1版本，不知道live()是在之前哪个版本被移除的，惭愧啊，之前都没留意。看源码发现bind()和delegate()都是由on()实现的。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()实现的：
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
- dede源码分享
售价:10金币
- dede源码分享
售价:40金币
- dede模板分享
售价:20金币
- dede源码分享
售价:0金币
- dede模板分享
售价:0金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。