Maison > Article > interface Web > jquery sur la suppression de la liaison d'événement
jquery sur la suppression de la liaison d'événement
- PHPzoriginal
- 2023-05-28 17:38:38653parcourir
Dans le développement front-end, afin d'obtenir divers effets interactifs, nous lierons les événements aux éléments de la page afin qu'ils puissent effectuer des opérations spécifiques dans certains scénarios. Cependant, nous devons parfois supprimer la liaison d'un événement. Par exemple, lorsqu'un élément est détruit ou n'a plus besoin d'écouter un événement, nous devons dissocier son gestionnaire d'événements correspondant de l'élément. Dans jQuery, plusieurs méthodes sont fournies pour implémenter la liaison et la dissociation d'événements, telles que on(), off(), unbind()etc. Cet article présentera principalement comment supprimer la liaison d'événement dans la méthode <code>on(). on()、off()、unbind()等。本文将主要介绍on()方法中如何移除事件的绑定。
jQuery事件处理
在jQuery中，事件处理方法一般有三种，分别是bind()、delegate()和live()。其中，delegate()使用的较少，其主要作用是为父级元素添加事件处理程序，用于动态添加的子元素；live()在jQuery1.7版本后被废弃，可以用on()代替。
on()是jQuery比较常用的事件处理方法，用于在指定的元素上绑定一个或多个事件处理函数。常见的使用方式如下：
$(selector).on(event, handler);
其中，selector为需要绑定事件的目标元素，可为标签、类名、ID等选择器；event为绑定的事件类型，如click、mouseover、keyup等；handler为事件处理函数，可以是匿名函数或已定义的函数名。
随着项目需求和代码规模的不断增长，可能会出现一个元素被多个回调函数绑定同一个事件的情况，这时候我们需要移除绑定在该元素上的某个或所有的事件处理函数。接下来，我们将介绍如何使用on()中的参数来移除事件的绑定。
移除指定处理程序
如果我们只需要移除元素上的指定事件处理程序，可以使用off()方法。该方法用于移除与指定元素相关的事件处理函数。常见的使用方式如下：
$(selector).off(event, handler);
其中，selector为需要移除事件的目标元素，可为标签、类名、ID等选择器；event为需要移除的事件类型，如click、mouseover、keyup等；handler为被移除的事件处理函数，可以是匿名函数或已定义的函数名。
接下来，我们通过一个具体的例子来演示使用off()方法移除事件的绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移除指定事件处理程序</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="btn">点击绑定事件</button>
<script>
function handleClick() {
console.log('处理click事件');
}
$('#btn').on('click', handleClick);
setTimeout(() => {
$('#btn').off('click', handleClick);
console.log('移除click事件处理程序');
}, 2000);
</script>
</body>
</html>在上面的代码中，我们在按钮元素上绑定了一个click事件，绑定的事件处理函数为handleClick。然后，在2秒后，我们使用off()方法移除了点击事件的处理程序handleClick。当我们点击按钮时，会在控制台上打印处理事件的信息。当移除处理程序后，再次点击按钮时，就没有任何响应了。这就是通过off()方法移除指定事件处理程序的基本操作。
移除与元素相关的全部处理程序
在开发中，我们也可能需要移除某个元素上绑定的所有事件处理程序，这时候可以使用off()方法的另外一个形式：
$(selector).off(event);
这个方法只需传入一个参数event，它会从元素上移除所有指定类型的事件处理函数。
使用one()
除了off()之外，在jQuery中还有另外一个方法可以用于移除事件绑定，它就是one()。该方法与on()很相似，但是它只会监听一次事件，执行完毕后就自动解除绑定。因此，如果你需要在元素上添加一个仅需执行一次的事件处理程序，那么可以使用one()代替on()来绑定事件，这样就无需手动解除绑定了。
$(selector).one(event, handler);
和on()方法一样，one()也接收两个参数，分别指定要绑定的事件类型和处理程序。当指定事件类型被触发时，处理程序就会被执行。当处理程序执行完毕后，对应的事件就会被自动移除。
使用unbind()
unbind()方法也可以用于移除事件绑定。和off()类似，unbind()也有两个用法，分别是移除指定的事件处理程序和移除所有类型的事件处理程序。使用方式如下：
$(selector).unbind(event, handler); // 移除指定事件处理程序 $(selector).unbind(event); // 移除全部事件处理程序
总结
本文主要介绍了在jQuery中使用on()、off()、one()和unbind()
Traitement des événements jQuery
Dans jQuery, il existe généralement trois méthodes de traitement des événements, à savoirbind(), delegate() et live (). Parmi eux, delegate() est rarement utilisé. Sa fonction principale est d'ajouter des gestionnaires d'événements pour les éléments parents pour les éléments enfants ajoutés dynamiquement. live() est utilisé dans jQuery1 ; abandonné après la version .7 et peut être remplacé par on(). 🎜🎜on() est une méthode de gestion d'événements couramment utilisée dans jQuery, qui est utilisée pour lier une ou plusieurs fonctions de gestion d'événements à des éléments spécifiés. Les méthodes d'utilisation courantes sont les suivantes : 🎜rrreee🎜 Parmi elles, selector est l'élément cible qui doit être lié à l'événement, qui peut être un sélecteur tel qu'une étiquette, un nom de classe, un ID, etc. ; event est l'élément de liaison. Certains types d'événements, tels que le clic, le survol, le keyup, etc. ; handler est la fonction de traitement d'événement, qui peut être une fonction anonyme ou un nom de fonction défini. 🎜🎜À mesure que les exigences du projet et l'échelle du code continuent de croître, il peut arriver qu'un élément soit lié au même événement par plusieurs fonctions de rappel. À ce stade, nous devons supprimer un ou tous les événements liés à la fonction de traitement. Ensuite, nous présenterons comment utiliser les paramètres dans on() pour supprimer la liaison d'événement. 🎜Supprimer le gestionnaire spécifié
🎜Si nous devons uniquement supprimer le gestionnaire d'événements spécifié sur l'élément, nous pouvons utiliser la méthodeoff(). Cette méthode est utilisée pour supprimer la fonction de gestionnaire d'événements liée à l'élément spécifié. Les méthodes d'utilisation courantes sont les suivantes : 🎜rrreee🎜 Parmi elles, selector est l'élément cible de l'événement qui doit être supprimé, qui peut être un sélecteur tel qu'une étiquette, un nom de classe, un ID, etc. ; event est requis Types d'événements supprimés, tels que clic, survol de la souris, keyup, etc. ; handler est la fonction de gestion des événements supprimée, qui peut être une fonction anonyme ou une fonction définie. nom de la fonction. 🎜🎜Ensuite, nous utilisons un exemple spécifique pour démontrer l'utilisation de la méthode off() pour supprimer la liaison d'événement. 🎜rrreee🎜Dans le code ci-dessus, nous lions un événement click sur l'élément bouton, et le gestionnaire d'événements lié est handleClick. Ensuite, après 2 secondes, nous supprimons le gestionnaire d'événements click handleClick en utilisant la méthode off(). Lorsque nous cliquons sur le bouton, les informations traitant de l'événement seront imprimées sur la console. Après avoir supprimé le gestionnaire, rien ne se passe lorsque vous cliquez à nouveau sur le bouton. Il s'agit essentiellement de supprimer un gestionnaire d'événements spécifié via la méthode off(). 🎜Supprimer tous les gestionnaires liés à l'élément
🎜Pendant le développement, nous pouvons également avoir besoin de supprimer tous les gestionnaires d'événements liés à un élément. Dans ce cas, nous pouvons utiliseroff() Une autre forme de. Méthode : 🎜rrreee🎜Cette méthode ne doit transmettre qu'un seul paramètre event, ce qui supprimera tous les gestionnaires d'événements du type spécifié de l'élément. 🎜Utilisez one()
🎜En plus deoff(), il existe une autre méthode dans jQuery qui peut être utilisée pour supprimer la liaison d'événement, qui est one () . Cette méthode est très similaire à on(), mais elle n'écoutera l'événement qu'une seule fois et se dissociera automatiquement après l'exécution. Par conséquent, si vous devez ajouter un gestionnaire d'événements sur un élément qui ne doit être exécuté qu'une seule fois, vous pouvez utiliser one() au lieu de on() pour lier l'événement. , de sorte qu'il n'est pas nécessaire de dissocier manuellement. 🎜rrreee🎜Comme la méthode on(), one() reçoit également deux paramètres, spécifiant le type d'événement et le gestionnaire à lier. Lorsque le type d'événement spécifié est déclenché, le gestionnaire est exécuté. Lorsque le gestionnaire termine l'exécution, l'événement correspondant sera automatiquement supprimé. 🎜Utiliser unbind()
🎜La méthodeunbind() peut également être utilisée pour supprimer la liaison d'événement. Semblable à off(), unbind() a également deux utilisations, à savoir supprimer le gestionnaire d'événements spécifié et supprimer tous les types de gestionnaires d'événements. L'utilisation est la suivante : 🎜rrreeeRésumé
🎜Cet article présente principalement l'utilisation deon(), off(), one ( ) et unbind() pour gérer les opérations de liaison et de dissociation d'événements. Pour différents besoins, vous pouvez choisir la méthode appropriée pour gérer la liaison d'événements, rendant ainsi le code plus flexible et plus efficace. Il convient de noter que lors de la déliaison, vous devez faire attention au passage correct des paramètres, sinon des situations inattendues peuvent survenir. 🎜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!
Articles Liés
Voir plus- Problème de transmission de la valeur du composant parent aux graphiques du composant enfant dans Vue
- Quelques réflexions sur React cette liaison
- Django utilise la requête pour obtenir les paramètres envoyés par le navigateur
- Opération DOM dans JQuery - wrap
- Explication du contenu associé du prototype et de la chaîne de prototypes