Explication détaillée des exemples d'utilisation de la fonction jQuery.on()

La fonction

on() est utilisée pour lier la fonction traitement d'événements à un ou plusieurs événements de l'élément spécifié.

De plus, vous pouvez également transmettre certaines données supplémentaires requises à la fonction de gestionnaire d'événements.

À partir de jQuery 1.7, la fonction on() fournit toutes les fonctions nécessaires pour lier les gestionnaires d'événements et est utilisée pour remplacer uniformément les fonctions d'événements précédentes telles que bind(), délégué(), live(), etc.

on() prend en charge les événements de liaison directement sur l'élément cible, et prend également en charge la liaison déléguée sur les éléments ancêtres de l'élément cible. En mode de liaison de délégation d'événements, même s'il s'agit d'un élément nouvellement ajouté après l'exécution de la fonction on(), tant qu'il remplit les conditions, la fonction de gestion des événements liés sera efficace pour lui.

De plus, cette fonction peut lier plusieurs gestionnaires d'événements au même élément et au même type d'événement. Lorsqu'un événement est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via on(), utilisez la fonction off(). Si vous souhaitez attacher un événement, l'exécuter une seule fois, puis le supprimer, utilisez la fonction one().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est ajoutée dans jQuery 1.7. Il a principalement les deux formes d'utilisation suivantes :

Première utilisation :

jQueryObject.on( events [, selector ] [, data ], handler )

Utilisation deux :

jQueryObject.on( eventsMap [, selector ] [, data ] )

Paramètre

Description du paramètre

events Chaîne de type un ou plusieurs avec des espaces séparés types d'événements et espaces de noms facultatifs, tels que "click", "focus click", "keydown.myPlugin".

Le type d'objet eventsMap est un objet Objet, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement lié (paramètre gestionnaire) .

selector Facultatif/Type de chaîne Un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés. Si ce paramètre est nul ou omis, cela signifie que l'élément courant lui-même est lié à l'événement (le déclencheur réel peut également être un élément descendant, tant que le flux d'événements peut atteindre l'élément courant).

data Facultatif/Tout type de données qui doivent être transmis à la fonction de traitement d'événements via event.data lorsqu'un événement est déclenché.

Fonction de traitement d'événement spécifiée par le type de fonction du gestionnaire.

Pour l'espace de noms facultatif dans les événements de paramètre, veuillez vous référer à l'exemple de code ci-dessous.

Concernant le sélecteur de paramètre, vous pouvez simplement le comprendre comme : si le paramètre est égal à null ou omis, l'événement est lié à l'élément correspondant actuel ; sinon, c'est l'élément descendant de l'élément correspondant actuel ; qui correspond à l'événement de liaison du sélecteur.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM qui déclenche l'événement parmi les éléments descendants de l'élément correspondant actuel. Si le paramètre selector est nul ou omis, cela pointe vers l'élément correspondant actuel (c'est-à-dire l'élément).

on() transmettra également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

La valeur de retour du gestionnaire de paramètres a le même effet que la valeur de retour de la fonction de traitement d'événements native du DOM. Par exemple, le gestionnaire d'événements de l'événement « submit » (soumission du formulaire) renvoie false pour empêcher la soumission du formulaire.

Si le gestionnaire de la fonction de traitement d'événements renvoie uniquement une valeur fausse, vous pouvez directement définir le gestionnaire sur false.

Valeur de retour

on()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Remarque importante :

Si le paramètre selector est passé, la fonction on() ne lie pas les gestionnaires d'événements aux éléments correspondant à l'objet jQuery actuel, mais à leurs éléments descendants qui correspondent à la liaison d'élément gestionnaire d'événements du paramètre selector du sélecteur. La fonction on() ne lie pas directement les événements à ces éléments descendants un par un, mais délègue le traitement aux éléments correspondants de l'objet jQuery actuel. En raison du mécanisme de flux d'événements DOM niveau 2, lorsque le sélecteur d'élément descendant déclenche un événement, l'événement sera transmis à tous ses éléments ancêtres dans le bouillonnement d'événements. Lorsque le flux d'événements est transmis à l'élément correspondant actuel, jQuery déterminera lequel. Il s'agit d'un élément descendant Lorsqu'un événement est déclenché, si l'élément correspond au sélecteur, jQuery capturera l'événement et exécutera le gestionnaire d'événements lié.

Pour faire simple, si nous voulons lier les gestionnaires d'événements de clic à toutes les balises

de la page, nous pouvons directement lier les gestionnaires d'événements de clic à chaque balise P séparément. Par exemple :

// Lier le gestionnaire de fonctions du gestionnaire d'événements de clic à tous les éléments P séparément

$("p").on("click", handler);

Nous pouvons également lier le mécanisme de délégation d'événements à n'importe quel élément ancêtre commun de ces balises P et utiliser le mécanisme de diffusion d'événements du DOM pour unifier le traitement de la délégation. Lorsque nous déclenchons l'événement click d'un élément, JS notifiera l'élément et son élément "parent", élément "grand-père"... jusqu'à ce que l'objet du document supérieur, si ces éléments ont des gestionnaires d'événements click qui leur sont liés, sera exécuté dans. séquence.

// Liez le gestionnaire de fonction du gestionnaire d'événements click à l'élément body Si l'événement click est déclenché par son élément P descendant, handler

$(document.body).on("click", "p", handler);

在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

示例&说明

以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：

// 这里的选择器selector用于指定可以触发事件的元素

// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。

// jQuery 1.0+ (1.4.3+支持参数data)

$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持参数data)

$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持参数data)

$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+

$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+

$("ancestor").on( "click", "selector" [, data ], handler );

请参考下面这段初始HTML代码：

Google

Nous lions les événements de clic à tous les éléments

dans