liaison et publication d'événements jquery

jQuery est une bibliothèque JavaScript très populaire avec une API pratique et des fonctions puissantes, et est largement utilisée dans le développement Web front-end. Lorsque vous utilisez jQuery pour développer des pages frontales, vous devez souvent lier et dissocier des événements aux éléments. Cet article présentera en détail comment utiliser jQuery pour la liaison et la dissociation d'événements, et résoudra les problèmes courants et leurs solutions.

1. Liaison d'événement

1. Liaison d'un seul événement

jQuery peut facilement lier la fonction de réponse à un événement d'un élément. Comme indiqué ci-dessous :

$(element).on(event, handler);

Parmi eux, element est l'élément auquel l'événement est lié, event est le type d'événement lié et handler est la fonction de réponse à l'événement.

Par exemple, si vous souhaitez ajouter un événement de clic à un élément de bouton, vous pouvez écrire comme ceci :

$("button").on("click", function(){
    // 事件响应函数
});

2 Lier plusieurs événements

Si vous souhaitez lier plusieurs événements à un élément, vous pouvez ajouter plusieurs événements. tape dans la méthode on . Par exemple :

$(element).on(event1, event2, handler);

Par exemple, si vous souhaitez lier simultanément les événements de clic et de survol de la souris à un élément de bouton, vous pouvez écrire comme ceci :

$("button").on("click mouseover", function(){
    // 事件响应函数
});

3. Lier la délégation d'événement

Lorsque l'événement doit être délégué. à un autre élément, vous pouvez utiliser sur La fonction de délégation d'événement de la méthode. Spécifiez simplement l'élément de liaison en tant que sélecteur. Par exemple :

$(parentElement).on(event, childSelector, handler);

Parmi eux, parentElement est l'élément parent auquel l'événement est lié, childSelector est le sélecteur d'élément enfant à déléguer et handler est la fonction de réponse à l'événement.

Par exemple, si vous souhaitez lier un délégué d'événement click à un élément enfant à un élément parent, vous pouvez écrire comme ceci :

$("#parent").on("click", "#child", function(){
    // 事件响应函数
});

2. Annulation d'événement

Dans le développement de pages, il est souvent nécessaire d'annuler des événements existants pour garantir que le code ne répète pas d'exécutions ou de problèmes. jQuery propose trois méthodes de libération d'événements, à savoir les méthodes off, unbind et die.

Méthode 1.off

La méthode off est principalement utilisée pour dissocier des événements via la méthode on.

Ce qui suit est le format de base de la méthode off :

$(element).off(event, handler);

où element est l'élément de l'événement à libérer, event est le type d'événement à libérer et handler est la fonction de réponse à l'événement à libérer.

Par exemple, en supposant qu'un événement de clic était auparavant lié à un élément de bouton et que vous devez maintenant dissocier l'événement, vous pouvez écrire comme ceci :

$("button").off("click");

2, méthode de dissociation

La méthode de dissociation peut également être utilisée pour. dissocier l'événement, mais il peut dissocier les événements liés par toutes les méthodes.

Voici le format de base de la méthode unbind :

$(element).unbind(event, handler);

Parmi eux, element est l'élément de l'événement à libérer, event est le type d'événement à libérer et handler est la fonction de réponse à l'événement à libérer.

Par exemple, un événement de clic était auparavant lié à l'élément bouton et un événement de survol était lié à l'élément bouton. Vous devez maintenant annuler les deux événements. Vous pouvez écrire comme ceci :

$("button").unbind();

Méthode 3.die. La méthode

die peut dissocier des événements via la délégation d'événements.

Voici le format de base de la méthode die :

$(parentElement).die(event, childSelector, handler);

Parmi eux, parentElement est l'élément parent à libérer, childSelector est le sélecteur d'élément enfant à déléguer et handler est la fonction de réponse à l'événement à libérer.

Par exemple, si un délégué d'événement de clic à un élément enfant était auparavant lié à l'élément parent et que maintenant l'événement doit être publié, vous pouvez écrire comme ceci :

$("#parent").die("click", "#child");

3. Problèmes courants et leurs solutions

1. . Comment empêcher la liaison répétée des événements Certainement ?

Situation 1 : s'il existe plusieurs événements liés au même élément, vous pouvez utiliser la méthode unique de jquery, qui n'exécutera la fonction de réponse à l'événement qu'une seule fois.

Par exemple :

$("button").one("click", function(){
    // 事件响应函数
});

Cas 2 : Si un événement doit être lié plusieurs fois, vous pouvez d'abord utiliser la méthode off pour dissocier l'événement.

Par exemple :

function clickHandler(){
    // 事件响应函数
}
$("button").off("click", clickHandler).on("click", clickHandler);

Cas 3 : utilisez la méthode unbind pour dissocier l'événement avant de le lier, puis reliez-le à nouveau.

Par exemple :

$("button").unbind("click").on("click", function(){
    // 事件响应函数
});

2. Comment dissocier un événement via la délégation d'événement ?

Vous pouvez utiliser la méthode Undelete ou Off, qui peuvent toutes deux libérer la délégation d'événements.

Par exemple :

$("#parent").undelegate("#child", "click");
$("#parent").off("click", "#child");

3. Comment annuler une fonction de réponse à un événement anonyme ?

Vous pouvez utiliser la méthode off pour définir la fonction de réponse à l'événement en tant que variable pour dissocier l'événement.

Par exemple :

var clickHandler = function(){
    // 事件响应函数
}
$("button").on("click", clickHandler);
$("button").off("click", clickHandler);

Cet article présente les méthodes de liaison et de dissociation d'événements de jQuery ainsi que les problèmes courants et leurs solutions. Comment utiliser jQuery pour la liaison et la dissociation d'événements est l'une des compétences nécessaires au développement front-end. J'espère qu'en étudiant cet article, je pourrai acquérir une compréhension plus approfondie de la liaison et de la dissociation des événements jQuery, améliorant ainsi l'efficacité du développement frontal Web.

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!