Maison > Article > interface Web > Une brève discussion sur les méthodes de liaison d'événements bind(), live(), délégué(), on() dans Jquery
Une brève discussion sur les méthodes de liaison d'événements bind(), live(), délégué(), on() dans Jquery
- 巴扎黑original
- 2017-06-25 10:52:491161parcourir
Avant-propos
Étant donné que jquery est souvent utilisé pour ajouter et supprimer des éléments dom dans les projets, la méthode d'événement de liaison des éléments dom sera impliquée. Résumons brièvement les différences entre bind, live, délégué et on. , pour référence future, et j'espère que cet article pourra aider les jardiniers à l'avenir. S'il y a quelque chose d'inapproprié dans l'article, j'espère que vous me corrigerez, sans plus tarder, allons droit au but.
bind()
Brève description
bind()Ajoute un ou plusieurs gestionnaires d'événements à l'élément correspondant.
Comment utiliser
$(sélecteur).bind(événement, données, fonction)
Événement : obligatoire ; un ou plusieurs événements ajoutés à l'élément, tels que click, dblclick, etc. ;
Traitement d'un événement unique : par exemple, $(selector).bind("click",data,function);
Traitement multi-événements : 1. Utilisez des espaces pour séparer plusieurs événements, tels que $(selector).bind("click dbclick mouseout",data,function);
2. Utilisez des accolades pour définir de manière flexible plusieurs événements, tels que $(sélecteur ).bind({event1:function , event2:function, ...})
Appel de la même fonction
Alternative aux accolades : la liaison est plus flexible et vous pouvez lier des fonctions aux événements séparément
données : facultatif ; paramètres qui doivent être transmis
function : obligatoire lorsque lié La fonction qui doit être exécutée lorsqu'un certain événement se produit ; 🎜>
Exemples
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> Voir le code
Version Jquery applicable
S'applique à toutes les versions, mais selon le site officiel, depuis la version jquery1.7, la fonction bind() Il est recommandé d'utiliser on() à la place.
live()
Brève description
live() Vers l'élément correspondant actuel ou futur Ajouter un ou plusieurs gestionnaires d'événements
Utilisation
$(sélecteur).live(événement,données,fonction)
Événement : Obligatoire ; un ou plusieurs éléments ajoutés aux événements d'élément, tels que comme click, dblclick, etc. ;
Traitement d'un événement unique : tel que $(selector).live ("clic", données, fonction);
Traitement multi-événements : 1. Utilisez des espaces pour séparer plusieurs événements Événements, tels que $(sélecteur).live("cliquez sur dbclick mouseout", données, fonction);
2. Utilisez des accolades pour définir de manière flexible plusieurs événements, tels que $(sélecteur). live({event1:function, event2:function, ...})
3. Méthode de séparation d'espace : la liaison est relativement rigide et ne peut pas lier des fonctions à des événements séparément. Elle convient à la gestion de plusieurs événements appelant la même fonction ;
Alternative aux accolades : la liaison est plus flexible et vous pouvez lier des fonctions aux événements individuellement ;
données : facultatif ; paramètres qui doivent être transmis
function：必需；当绑定事件发生时，需要执行的函数；
举例说明
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>
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：必需；当绑定事件发生时，需要执行的函数；
举例说明
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>
View Code
适用Jquery版本
jque ry1.4.2 et plus
on()
Brève description
on() pour l'élément spécifié, ajoutez Un ou plus de gestionnaires d'événements et spécifie les fonctions à exécuter lorsque ces événements se produisent. Les gestionnaires d'événements utilisant la méthode on() fonctionnent sur les éléments actuels ou futurs (tels que les nouveaux éléments créés par un script). $(selector) .on(event,childselector,data,function)
événement :
Obligatoire ; un ou plusieurs événements ajoutés à l'élément, tels que click, dblclick, etc.
Traitement d'un seul événement : tel comme$(selector).on("click",childselector,data,function);
Traitement multi-événements : 1. Utilisez des espaces pour séparer plusieurs événements, tels que $(sélecteur). on("cliquez
dbclick mouseout", childseletor, data ,fonction); 2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector); 3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况； 大括号替代方式：绑定较为灵活，可以给事件单独绑定函数； childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素； data：可选；需要传递的参数； function：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用Jquery版本 jquery1.7 et supérieur ; après l'apparition de la version jquery1.7, est utilisé pour remplacer bind (), méthode d'événement de liaison live() ; Les similitudes, les différences, les avantages et les inconvénients des quatre méthodes Mêmes points : 1. Les deux prennent en charge la liaison d'éléments uniques et plusieurs événements ; espaces Méthode de séparation ou méthode de substitution d'accolades ; 2. Tous les événements sont transmis au document pour la réponse aux événements via le bouillonnement d'événements ; > 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下: View Code 2. La fonction bind() était relativement populaire avant la version 1.7 de jquery. Après la sortie de la version 1.7, bind() n'est plus officiellement recommandée et la fonction alternative est on(). De même, les fonctions nouvellement ajoutées dans la version 1.7 peuvent être 🎜> Utilisé pour remplacer la fonction live(), qui a été supprimée dans la version 1.9 3. similaire à la fonction délégué(), mais la fonction live() est en cours d'exécution. Elle est pire que délégué() en termes de vitesse, de flexibilité et de prise en charge du sélecteur CSS. Si vous souhaitez connaître la situation spécifique, veuillez. cliquez ici : http://kb.cnblogs.com/page/94469/ 4. bind() prend en charge toutes les versions de Jquery ; live() prend en charge jquery1.8- ; délégué() prend en charge jquery1.4.2+ ; on() prend en charge jquery1.7+ ; > Résumé 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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript