Quelles sont les méthodes de délégation d’événements jquery ?

Les méthodes de délégation d'événements jquery incluent : 1. la méthode blind(), principalement utilisée pour lier des événements aux éléments sélectionnés ; 2. la méthode live(), ajoute un ou plusieurs gestionnaires d'événements aux éléments correspondants actuels ou futurs 3. la méthode délégué() ; ; 4. méthode on(), utilisée pour lier les événements d'écoute à l'élément parent le plus proche.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

Qu'est-ce que la délégation événementielle ?

Les événements de l'élément enfant sont délégués à l'élément parent, au lieu de l'attribuer à l'élément enfant pour lier l'événement lui-même, puis trouver l'événement correspondant.target lorsque l'événement est déclenché

fait référence au. utilisation du bouillonnement d'événements et spécification d'un seul gestionnaire d'événements Programme pour gérer tous les événements d'un certain type

Pourquoi utiliser la délégation d'événements ?

Parce que le nombre de gestionnaires d'événements ajoutés à la page dans js affectera les performances globales de fonctionnement de la page

Deuxièmement, il est trop difficile d'ajouter les gestionnaires d'événements un par un à la liste. Par conséquent, la délégation d'événements s'améliore considérablement. les performances d'exécution de la page. Performances

Traverser les événements de liaison à li sous ul via une boucle for Cela ne semble pas poser de problème mais cela affecte en fait les performances d'exécution de la page

À ce stade, la délégation d'événements bouillonne. mode est utilisé pour résoudre le problème.

Cependant, il peut y avoir En pensant aux événements liés à ul, tous les li ne seront-ils pas affectés après la mise en œuvre ?

Un nouveau concept est introduit : source de l'événement : quel que soit l'élément auquel l'événement est lié, il fait référence à la cible qui déclenche réellement l'événement

event.target

eg:ul.onclick=function(event){ }

La chose simple est de réduire l'accès au DOM, de réduire la mémoire et d'améliorer les performances d'exécution de la page

Quelles sont les méthodes de délégation d'événements jquery

1. Blind

Définition et utilisation : Principalement utilisé. pour sélectionner les éléments pour la liaison d'événement

Syntaxe :

blind("事件类型"，data,function(){ });
//data是传入函数的参数用event.data获取（平时用的.click()等都是其简化用法）

Caractéristiques ; Convient aux pages statiques, il ne peut être lié qu'à des éléments qui existent déjà lorsqu'il est appelé, et ne peut pas être lié à des éléments ajoutés ultérieurement

Lorsque la page est chargé, Perform blind ;

2, live (non pris en charge après 1.7)

Définition : Ajouter un ou plusieurs gestionnaires d'événements aux éléments correspondants actuels ou futurs

Syntaxe :

live("事件类型",data, 函数名);//data可选

Caractéristiques : live n'ajoute pas ; events Se lie à lui-même (this), mais à this.context

Il s'agit d'utiliser le mécanisme de délégation d'événements pour compléter la surveillance et le traitement des événements, et déléguer le traitement des nœuds au document

Les éléments nouvellement ajoutés n'ont pas besoin de être lié plus Un auditeur peut gérer plusieurs événements

Ne peut être placé que derrière l'élément directement sélectionné

3 Délégué

Définition : Liez l'événement d'écoute à l'élément parent le plus proche, car l'événement peut remonter plus rapidement.

Syntaxe :

delegate(selector,type,[data],fn)

Caractéristiques : Utilisation plus précise des proxys d'événements dans une petite plage, les performances sont meilleures que .live(). Peut être utilisé sur des éléments ajoutés dynamiquement.

("父级选择器").delegate(".a","click",function())//表示：.a的事件通过父级元素进行委托，(this)获取的是触发事件的子元素

4, on

Définition ; lier l'événement d'écoute à l'élément parent le plus proche

Syntaxe :

on(type, 选择器，方法)

Caractéristiques : Les événements d'écoute peuvent également être utilisés pour les balises nouvellement ajoutées sous l'élément parent

prend également en charge plusieurs Traitement des événements temporels

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

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!