Preface
Because projects often use jquery to add and delete dom elements, it involves the binding event method of dom elements. Let’s briefly summarize the differences between bind, live, delegate, and on. , for future reference, and I hope this article can help gardeners in the future. If there is anything inappropriate in the article, I hope you will correct me. Without further ado, let’s get straight to the point.
bind()
Brief description
## bind()#Add one or more event handlers to the matching element.
##How to use
$(selector).bind(event,data,function)
Event：Required; one or more events added to the element, such as click, dblclick, etc.;
Single event processing: For example, $(selector).bind("click",data,function);
Multi-event processing: 1. Use spaces to separate multiple events, such as $(selector).bind("click dbclick mouseout",data,function);
## duct in in , event2:function, ...})## ## 3. Space separation method: Binding is relatively rigid and cannot bind separate functions to events. It is suitable for processing multiple events. Calling the same function;
data：Optional; parameters that need to be passed;
# function：Required; when bound Function that needs to be executed when a certain event occurs;
##for example
## #Applicable Jquery version # Applicable to all versions, but according to the official website, since jquery1.7 version, the bind() function It is recommended to use on() instead. Brief description To the current or future matching element Add one or more event handlers; Usage $(selector).live(event,data,function) Required; one or more items added to the element single event, such as click, dblclick, etc.; Single event processing: for example $(selector).live ("click",data,function);# Multi-event processing: 1. Use spaces to separate multiple events Events, such as $(selector).live("click dbclick mouseout",data,function); $(selector).live({event1:function, event2:function, ...}) ## 3. There is a way to separate the space: binding is more rigid, cannot bind functions alone, suitable for processing multiple events call the same function; Braces alternative: Binding is more flexible and you can bind functions to events separately; # Data:
function：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用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：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用Jquery版本 jque #ry1.4.2# and above; on() Brief description on() For the specified element, add One or more event handlers and specifies functions to run when these events occur. Event handlers using the on() method work on current or future elements (such as new elements created by a script). Usage ## $(selector ).on(event,childselector,data,function) ## event： Required; one or more events added to the element, such as click, dblclick, etc.; ## Single event processing: for example $(selector).on("click",childselector,data,function); Multi-event processing: 1. Use spaces to separate multiple events, such as $(selector). on("click ##dbclick mouseout",childseletor,data,function);# 2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector); 3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况； 大括号替代方式：绑定较为灵活，可以给事件单独绑定函数； childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素； data：可选；需要传递的参数； function：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用Jquery版本 jquery1.7## and above; after jquery1.7 version appears, is used to replace bind (), live() binding event method; #Similarities, differences, advantages and disadvantages of the four methods ##Same point: 1. Both support the binding of single elements and multiple events; spaces Separation method or brace replacement method; ## 2. All events are passed to the document for event response through event bubbling; 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下: View Code ##2. The bind() function was relatively popular before jquery version 1.7. After version 1.7 came out, bind() is no longer officially recommended, and the alternative function is on(). This is also The newly added functions in version 1.7 can also be # Used to replace the live() function, which has been deleted in version 1.9; #3. The live() function is similar to the delegate() function, but the live() function is executing It is worse than delegate() in terms of speed, flexibility and CSS selector support. If you want to know the specific situation, please click here: # ## http://kb.cnblogs.com/page/94469/ #4.##bind() supports all versions of Jquery; live() supports jquery1.8-; delegate() supports jquery1.4.2+; on() supports jquery1.7+; Summary If the jquery version referenced in the project is a lower version, it is recommended to use delegate(). For higher versions of jquery, on() can be used instead. The above is only a personal opinion, such as If you have different ideas, please feel free to communicate. 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>jquery中bind()绑定事件方式</title> 4 <style type="text/css"> 5 .container 6 { 7 width: 300px; 8 height: 300px; 9 border: 1px #ccc solid;10 background-color: Green;11 }12 .btn-test13 {14 border: 1px #ccc solid;15 padding: 5px 15px;16 cursor: pointer;17 }18 </style>19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>20 <script type="text/javascript">21 $(function () {22 23 /*********添加单个事件处理*********/24 25 $(".btn-test").bind("click", function () {26 //显示隐藏p27 $(".container").slideToggle();28 });29 30 /********添加多个事件处理********/31 32 //空格相隔方式33 $(".btn-test").bind("mouseout click", function () {34 //显示隐藏p35 $(".container").slideToggle();36 });37 38 //大括号替代方式39 $(".btn-test").bind({40 "mouseout": function () {41 alert("这是mouseout事件!");42 },43 "click": function () {44 $(".container").slideToggle();45 }46 });47 48 /********删除事件处理********/49 $(".btn-test").unbind("click");50 51 });52 </script>53 </head>54 <body>55 <input type="button" value="按钮" class="btn-test" />56 <p class="container">57 </p>58 </body>59 </html>
View Code
live()
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>jquery中live()绑定事件方式</title> 4 <style type="text/css"> 5 .container 6 { 7 width: 300px; 8 height: 300px; 9 border: 1px #ccc solid;10 background-color: Green;11 }12 .btn-test13 {14 border: 1px #ccc solid;15 padding: 5px 15px;16 cursor: pointer;17 }18 </style>19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>20 <script type="text/javascript">21 $(function () {22 23 /*********添加单个事件处理*********/24 25 $(".btn-test").live("click", function () {26 //显示隐藏p27 $(".container").slideToggle();28 });29 30 31 /********添加多个事件处理********/32 33 //空格相隔方式34 $(".btn-test").live("mouseout click", function () {35 //显示隐藏p36 $(".container").slideToggle();37 });38 39 //大括号替代方式40 $(".btn-test").live({41 "mouseout": function () {42 alert("这是mouseout事件!");43 },44 "click": function () {45 $(".container").slideToggle();46 }47 });48 49 /********删除事件处理********/50 $(".btn-test").die("click");51 52 });53 </script>54 </head>55 <body>56 <input type="button" value="按钮" class="btn-test" />57 <p class="container">58 </p>59 </body>60 </html> 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>jquery中delegate()绑定事件方式</title> 4 <style type="text/css"> 5 .container 6 { 7 width: 300px; 8 height: 300px; 9 border: 1px #ccc solid;10 background-color: Green;11 }12 .btn-test13 {14 border: 1px #ccc solid;15 padding: 5px 15px;16 cursor: pointer;17 }18 </style>19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>20 <script type="text/javascript">21 $(function () {22 23 /***********单元素添加单事件***********/24 25 //按钮绑定单击事件 实现p的显示隐藏26 $(".header").delegate("#btn-test1", "click", function () {27 $(".container").slideToggle();28 });29 30 31 /***********单元素添加多事件***********/32 33 //空格相隔方式34 $(".header").delegate("#btn-test1", "click mouseout", function () {35 $(".container").slideToggle();36 });37 38 //大括号替代方式39 $(".header").delegate("#btn-test1", {40 "mouseout": function () {41 alert("这是mouseout事件!");42 },43 "click": function () {44 $(".container").slideToggle();45 }46 });47 48 49 });50 </script>51 </head>52 <body>53 <p class="header">54 <input type="button" value="按钮1" class="btn-test" id="btn-test1" />55 <input type="button" value="按钮2" class="btn-test" id="btn-test2" />56 </p>57 <p class="container">58 </p>59 </body>60 </html> 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>jquery中on()绑定事件方式</title> 4 <style type="text/css"> 5 .container 6 { 7 width: 300px; 8 height: 300px; 9 border: 1px #ccc solid;10 background-color: Green;11 }12 .btn-test13 {14 border: 1px #ccc solid;15 padding: 5px 15px;16 cursor: pointer;17 }18 </style>19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>20 <script type="text/javascript">21 $(function () {22 23 /*********添加单个事件处理*********/24 25 $(".header").on("click", ".btn-test", function () {26 //显示隐藏p27 $(".container").slideToggle();28 });29 30 /********添加多个事件处理********/31 32 //空格相隔方式33 $(".header").on("mouseout click", ".btn-test", function () {34 //显示隐藏p35 $(".container").slideToggle();36 });37 38 //大括号替代方式39 $(".header").on({40 "mouseout": function () {41 alert("这是mouseout事件!");42 },43 "click": function () {44 $(".container").slideToggle();45 }46 }, ".btn-test");47 48 //删除事件49 $(".header").off("click", ".btn-test");50 51 });52 </script>53 </head>54 <body>55 <p class="header">56 <input type="button" value="按钮" class="btn-test" />57 </p>58 <p class="container">59 </p>60 </body>61 </html>
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>jquery中四种方式给未来元素设置事件</title> 4 <style type="text/css"> 5 .container 6 { 7 width: 300px; 8 height: 300px; 9 border: 1px #ccc solid;10 background-color: Green;11 }12 .btn-test13 {14 border: 1px #ccc solid;15 padding: 5px 15px;16 cursor: pointer;17 }18 </style>19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>20 <script type="text/javascript">21 $(function () {22 23 //利用bind()方法，给P标签设置click方法 ======失败 没有任何反应=======24 $(".container p").bind("click", function () {25 alert("bind()添加单击事件成功!");26 });27 28 //利用live()方法.给P标签设置click方法 =======成功调用方法============29 $(".container p").live("click", function () {30 alert("live()添加单击事件成功!");31 });32 33 //利用delegate()方法.给P标签设置click方法 =======成功调用方法============34 $(".container").delegate("p", "click", function () {35 //显示隐藏p36 alert("delegate()添加单击事件成功!");37 });38 39 //利用on()方法.给P标签设置click方法 =======成功调用方法============40 $(".container").on("click", "p", function () {41 //显示隐藏p42 alert("on()添加单击事件成功!");43 });44 45 //按钮添加P标签46 $(".btn-test").click(function () {47 $(".container").append("<p>这是新增的段落!</p>");48 });49 });50 </script>51 </head>52 <body>53 <input type="button" class="btn-test" value="添加元素" />54 <p class="container">55 </p>56 </body>57 </html>
The above is the detailed content of A brief discussion on bind(), live(), delegate(), on() event binding methods in Jquery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
