Que signifie l'événement de liaison jquery ?

Dans jquery, lier des événements signifie lier des événements temporels ordinaires aux nœuds DOM. Lorsque le nœud DOM est sélectionné, l'événement y est lié pour permettre aux utilisateurs de fournir les opérations correspondantes. Jquery a une liaison. Il existe quatre méthodes : live, délégué et ; on pour lier des événements. La méthode live a été supprimée. Il est recommandé d'utiliser on pour lier des événements.

L'environnement d'exploitation de ce tutoriel : système Windows 10, jquery version 3.6.0, ordinateur Dell G3.

jquery Que signifie l'événement de liaison ?

Liaison d'événement : liez les événements ordinaires aux nœuds DOM lorsque le nœud DOM est sélectionné, liez-y l'événement pour permettre aux utilisateurs de fournir les opérations correspondantes.

Par exemple : lier un événement de clic de souris sur un bouton, lier un événement focusin à une entrée, etc. Exemple spécifique : écrire souvent $('.bn1').click(function(){. ..}) est une liaison d'événement ordinaire .

Extension :

Délégation d'événement : fait référence au complément et à l'extension de la liaison d'événement sur la base de la liaison d'événement. Plus précisément, cela signifie : transmettre la liaison d'événement au nœud DOM de l'élément parent (nœud ancêtre) via l'élément de nœud enfant. Gestion unifiée de tous ses éléments enfants descendants.

De cette façon, lorsque vous rencontrez des sous-éléments qui doivent être liés à de nombreux événements, vous pouvez éviter beaucoup de problèmes, répéter le travail de liaison des événements et assurer un accès efficace. Code spécifique $('.div').on('click','.bn2',function(){...})

jquery propose quatre façons de lier des événements. lier, vivre, déléguer, activé. Parmi eux, live a été supprimé et les couches inférieures de bind et délégué sont implémentées.

jquery nous recommande d'utiliser on pour lier des événements. En plus des événements natifs, jquery prend en charge la liaison d'événements personnalisés.

La méthode la plus couramment utilisée

$("selector").Nom de l'événement (fonction anonyme)

Exemple 1 :

//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
					//函数内容
				})

Exemple 2 :

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

Exemple 3 :

fonction de liaison

$("selector").bind({"event name": fonction anonyme})

Exemple 1 :

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

Exemple 2 :

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

Exemple 3 :

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

Remarque : Le paramètre de la fonction de liaison est ici un dictionnaire entouré de <code>accolades, la valeur clé est le nom de l'événement entre guillemets doubles, la valeur valeur est le contenu de la fonction, doit être certain code> Faites attention au format. <blockquote><p><code>注：这里的bind函数参数为一个大括号包裹的字典，key值为双引号下的事件名称，value值为函数内容，一定一定一定要注意格式。

on函数

两个形参

$(“选择器”).on(“事件名称”,匿名函数)

举例：

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
					//函数内容
				}})

注：含有两个形参的on函数，和bind函数使用方法类似，只是格式不同，可以一起记忆。

三个形参

含有三个参数，非常适合含有多个孩子的父节点使用，可以统一控制孩子节点事件

$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)

举例:

$("button").on("click",function(){
					//函数内容
				})

注:一定要注意含有三个参数的使用场景，并且注意this关键字的使用

delegate函数

delegate函数有三个形参，和on函数有着相似之处，区别是参数位置不同。

$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

$("ul").on("click","li",function(){
					$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
 				})

注：一定要注意这里的参数排列顺序和on函数的参数排列顺序不同。

总结

• 纵观上面的绑定事件，可以发现，不同的绑定事件只是换了一个关键字以及相对应的参数列表；
• 它们共有的都是$("选择器").函数名(参数列表)
on function

Deux paramètres formels$("selector").on("event name", fonction anonyme)Exemple :

$("ul").delegate("li","click",function(){
					$(this).css("color","blue");
				})

Note : La fonction on avec deux paramètres formels est similaire à la fonction bind, sauf que le format est différent et peut être mémorisé ensemble. <tr> <td></td> <td>Trois paramètres formels</td> </tr> <tr>contient trois paramètres, ce qui est très approprié pour les nœuds parents avec plusieurs enfants. Il peut contrôler uniformément les événements des nœuds enfants<td></td> <td>$("Parent Node Selector").on("Event Name" , "nœud enfant, c'est-à-dire l'élément à lier", fonction anonyme)</td> </tr> <tr>Exemple :<td>rrreee</td> <td> <code>Remarque : assurez-vous de faire attention au scénario d'utilisation avec trois paramètres, et faites attention à ceci Utilisation de mots-clés$("sélecteur de nœud parent").delegate("nœud enfant, c'est-à-dire l'élément à lier", "nom de l'événement", fonction anonyme)rrreeeRemarque : Il convient de noter que l'ordre des paramètres ici est différent de celui de la fonction on.

fonction déléguée	la fonction déléguée a trois paramètres formels, qui sont similaires à la fonction on. La différence est que les positions des paramètres sont différentes.

Résumé

En regardant les événements de liaison ci-dessus, vous pouvez constater que différents événements de liaison modifient simplement un mot-clé et la liste de paramètres correspondante
Tout ce qu'ils ont en commun est $( "Selector") ; .Nom de la fonction (liste de paramètres); Le contenu de la liste des paramètres n'est rien de plus que le nom de l'événement, la fonction anonyme ou le sélecteur de nœud enfant. 🎜La fonction anonyme ici est en fait un stockage L'adresse du corps du code. équivaut à une adresse en paramètre. Juste pour réduire la quantité de code, l'adresse de la fonction est directement remplacée par une fonction anonyme. 🎜🎜🎜🎜🎜🎜modèle🎜🎜🎜🎜🎜🎜🎜🎜🎜Le plus couramment utilisé🎜🎜$("sélecteur").Nom de l'événement (fonction anonyme)🎜🎜🎜🎜fonction de liaison🎜🎜$("sélecteur "). lier ({"nom de l'événement": fonction anonyme})🎜🎜🎜🎜on function🎜🎜$("sélecteur").on("nom de l'événement", fonction anonyme)🎜🎜🎜🎜🎜🎜🎜$("sélecteur de nœud parent" .on("Nom de l'événement", "Nœud enfant, c'est-à-dire l'élément à lier", fonction anonyme)🎜🎜🎜🎜fonction déléguée🎜🎜$("Sélecteur de nœud parent").delegate("Nœud enfant, qui est, l'élément à lier", "nom de l'événement", fonction anonyme)🎜🎜🎜🎜🎜Recommandation du didacticiel vidéo : 🎜Tutoriel vidéo jQuery🎜🎜🎜

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!