À propos des caractéristiques du traitement des événements jQuery (mécanisme de dénomination des événements)

Cet article vous présente principalement certaines fonctionnalités du traitement des événements jquery et les connaissances associées sur le mécanisme de dénomination des événements jquery. L'introduction est très détaillée et a une valeur de référence. Les amis intéressés devraient le lire ensemble

JQuery The. bind() et unbind() fournissent un mécanisme de liaison et d'annulation d'événements, qui peut lier des événements pris en charge par HTML par défaut ainsi que des événements personnalisés. JQuery prend en charge les événements personnalisés, ce qui apporte évidemment une grande flexibilité à la programmation. Apprenons ensemble quelques fonctionnalités du traitement des événements jquery.

1. Les événements dans JQuery peuvent être liés à plusieurs reprises et ne seront pas écrasés.

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

Lorsque le bouton 1 est cliqué, ces deux gestionnaires d'événements seront déclenchés. Peut-être direz-vous que les liaisons ci-dessus sont différentes fonctions anonymes, occupant différents espaces mémoire. C'est effectivement le cas, mais même s'il s'agit de la même fonction de traitement, il existe toujours un problème de liaison en double. Lorsque l'utilisateur clique sur Button1, la fonction de gestionnaire d'événements suivante sera également appelée deux fois.

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

Dans la plupart des scénarios, la fonction de traitement des événements ne doit être liée qu'une seule fois, nous devons donc faire attention à la fonctionnalité de liaison répétée des événements JQuery si l'événement est exécuté plusieurs fois, même s'il y en a. pas de bug, ce ne sera pas une bonne pratique.

2. Utilisez bind pour lier plusieurs événements et fonctions de traitement en même temps.

Si plusieurs événements doivent enregistrer la même fonction de gestionnaire, vous pouvez utiliser le code suivant pour simplifier (les noms d'événements sont séparés par des espaces) :

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

Si le gestionnaire de chaque événement Si les fonctions sont différentes, vous pouvez utiliser la méthode suivante (objet json) :

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

3. Passez l'objet événement et les paramètres personnalisés.

De manière générale, lorsque nous utilisons jquery, nous avons rarement besoin d'objets d'événement et nous n'avons pas besoin de transmettre de paramètres personnalisés aux fonctions de traitement d'événements. Mais si nous avons vraiment besoin de le faire, JQuery le prend également en charge.

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 
alert("params=" + eventObject.data.name); 
});

eventObject est très similaire à l'objet événement dans IE et FF, grâce auquel vous pouvez obtenir des informations plus détaillées lorsqu'un événement se produit. Si nous spécifions un paramètre personnalisé, JQuery le placera dans l'attribut data de l'objet événement, c'est-à-dire que nous pourrons obtenir la valeur du paramètre que nous avons transmise via eventObject.data.

4. Trois formes d'annulation d'événement.

unbind est utilisé pour annuler la fonction de traitement d'événement précédemment liée via bind. De manière générale, il existe trois formes : annuler tous les événements, annuler un certain type d'événement, annuler un certain type d'événement. Gestionnaire d'événements. fonction.

Supposons que nous lions les événements click, mouseup et mousedown au bouton 1, et que l'événement click soit lié à 2 fonctions de traitement.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

$("#button1").unbind() : Annule tous les gestionnaires d'événements liés sur Button1.

$("#button1").unbind("click") : Annule uniquement le gestionnaire d'événements de type clic lié au bouton1.

Ces deux formulaires sont faciles à comprendre et sont également les méthodes les plus couramment utilisées dans notre programmation quotidienne. Dans le code ci-dessus, nous avons enregistré 2 fonctions de traitement d'événements de clic et conserver la première. Puisque nous enregistrons une fonction anonyme, il n'y a aucun moyen de l'implémenter. Le code ci-dessous est erroné et n'obtient pas les résultats escomptés.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

Bien que lier et délier utilisent la même fonction anonyme, ces deux fonctions ne sont pas le même objet JavaScript car elles occupent des espaces mémoire différents. Si vous êtes intelligent, vous avez peut-être pensé : si la liaison et la dissociation utilisent des fonctions différentes, l'objectif peut-il être atteint ? C'est bien le cas, le code ci-dessous est correct.

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

C'est la troisième forme d'utilisation de la dissociation. Vous pouvez voir que cette approche est très mauvaise, car cette approche ne permet pas l'utilisation de fonctions anonymes, et nous devons exposer des fonctions globales (au moins). les exigences peuvent être vues lors de la dissociation). JQuery fournit un mécanisme d'espace de noms d'événements, qui, à mon avis, est conçu pour résoudre ce problème.

5. Espace de noms d'événement.

Comme mentionné ci-dessus, l'espace de noms d'événement est destiné à résoudre les problèmes rencontrés dans la troisième forme de dissociation. Ce qui suit est une explication tirée de la documentation officielle de l'API JQuery :

Au lieu de conserver des références aux gestionnaires afin de les dissocier, nous pouvons espacer les événements et utiliser cette fonctionnalité pour restreindre la portée de nos actions de dissociation. .

Le soi-disant espace de noms d'événement ajoute en fait un alias dans une syntaxe à points après le type d'événement pour référencer l'événement, tel que "click.a", où "a" est l'alias de l'événement. type de clic de l'événement actuel, c'est-à-dire l'espace de noms de l'événement. Puisque le point est utilisé pour définir l'espace de noms, si nous utilisons un événement personnalisé, le nom de l'événement ne doit pas contenir le point, sinon cela entraînerait des problèmes inattendus. Il n'est pas nécessaire d'essayer ce genre de problème. Utilisez des caractères spéciaux si vous le pouvez, sinon vous vous causerez des problèmes.

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

Comme vous pouvez le constater : en utilisant l'espace de noms, vous pouvez annuler une fonction de traitement d'événement sous un certain type d'événement de manière plus élégante. Cela mérite d'être mentionné ici : l'utilisation de l'espace de noms n'est pas en conflit avec la dissociation, et les trois formes de déliaison ci-dessus peuvent toujours être utilisées normalement. $("#button1").unbind() peut toujours annuler tous les événements sur Button1, et $("#button1").unbind("click") peut toujours annuler tous les événements de clic. Cette conception de compatibilité est géniale.

使用命名空间还要1个好处：能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：

方式1：

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

方式2：

$("#button1").unbind(".a");

很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

jquery获取url参数及url加参数的方法

Jquery ajax技术实现间隔N秒向某页面传值

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!