Maison  >  Article  >  interface Web  >  javascript non défini

javascript non défini

王林
王林original
2023-05-16 09:52:37515parcourir

JavaScript est un langage de programmation largement utilisé dans le développement Web. Lorsque nous ajoutons des fonctionnalités à notre site Web, nous utilisons JavaScript pour rendre les pages Web plus interactives et dynamiques. Dans le développement Web, nous devons souvent configurer certaines fonctions pour réaliser certaines tâches. Mais parfois, nous devons annuler les fonctions qui ont été définies. Cet article explique comment annuler la fonction set en JavaScript.

1. Annuler les écouteurs d'événements

Dans le développement Web, nous devons souvent ajouter des écouteurs d'événements aux éléments pour effectuer certaines opérations lorsque l'utilisateur interagit avec l'élément. Par exemple, nous pourrions ajouter un écouteur d'événement de clic à un bouton afin qu'un code se déclenche lorsque l'utilisateur clique sur le bouton. Cependant, dans certains cas, nous devons annuler les écouteurs d'événements qui ont été ajoutés.

L'annulation des écouteurs d'événements peut être réalisée via la méthode removeEventListener(). Cette méthode nécessite de transmettre deux paramètres : le type d'événement et la fonction à annuler. Par exemple, le code suivant ajoutera un écouteur d'événement de clic à un bouton :

const button = document.getElementById('myButton');
button.addEventListener('click', myFunction);

Pour annuler cet écouteur d'événement, vous pouvez utiliser le code suivant :

button.removeEventListener('click', myFunction);

Cela supprimera l'écouteur d'événement de clic précédemment ajouté.

2. Annuler le minuteur

Dans le développement Web, nous devons souvent utiliser des minuteurs pour exécuter du code, par exemple exécuter du code une fois sur deux ou exécuter du code après un certain temps. En utilisant JavaScript, les minuteries peuvent être implémentées à l'aide des fonctions setTimeout() et setInterval().

La fonction setTimeout() est utilisée pour exécuter une tâche après un temps spécifié, tandis que la fonction setInterval() est utilisée pour exécuter une tâche à un intervalle de temps spécifié. Cependant, dans certains cas, nous devons annuler le minuteur configuré pour éviter de répéter la tâche.

L'annulation de la minuterie peut être implémentée via les fonctions clearTimeout() et clearInterval(). Ces fonctions doivent toutes transmettre un paramètre, qui est l'ID de la minuterie à annuler. Par exemple, le code suivant définira un timer à l'aide de la fonction setTimeout() :

const myTimeout = setTimeout(myFunction, 3000);

Pour annuler ce timer, vous pouvez utiliser le code suivant :

clearTimeout(myTimeout);

Si vous avez déjà utilisé un timer réglé par la fonction setInterval(), vous devez utiliser la fonction clearInterval() pour annuler la minuterie.

3. Annuler le comportement par défaut

Dans le développement Web, le comportement par défaut fait référence à ce que le navigateur fait dans des circonstances spécifiques. Par exemple, lorsque vous cliquez sur un lien, le navigateur tente d'accéder à la page vers laquelle pointe le lien ; lorsque vous soumettez un formulaire, le navigateur tente de soumettre le formulaire au serveur afin que les données du formulaire puissent être traitées. Parfois, nous devons annuler ces comportements par défaut.

L'annulation du comportement par défaut peut être obtenue à l'aide de la méthode PreventDefault(). Cette méthode doit être appelée dans le gestionnaire d'événements et doit être appelée au début du gestionnaire d'événements pour annuler le comportement par défaut avant l'exécution d'un autre code. Par exemple, le code suivant ajoutera un écouteur d'événement de clic à un lien et empêchera le navigateur d'accéder à la page vers laquelle pointe le lien :

const link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
  event.preventDefault();
  // 做其他事情,例如显示一个提示框
});

4. Annuler le bouillonnement

Dans le développement Web, la propagation des événements est divisée en deux formes : Bouillonnant et capturant. En bullage, un événement est déclenché d'abord sur l'élément le plus spécifique (comme un bouton) puis se propage vers le haut jusqu'à atteindre l'élément supérieur. La capture commence à l'élément de niveau supérieur et descend jusqu'à atteindre l'élément le plus spécifique.

Parfois, nous devons empêcher la propagation d'un événement pour éviter de gérer l'événement dans un autre code. L'annulation du bouillonnement d'événements peut être obtenue à l'aide de la méthode stopPropagation(). Cette méthode doit être appelée dans le gestionnaire d'événements et doit être appelée avant l'exécution d'un autre code. Par exemple, le code suivant ajoutera un écouteur d'événement click à la fois à un bouton et à l'élément div contenant. Lorsque vous cliquez sur le bouton, l'événement click du bouton sera déclenché, mais ne remontera pas jusqu'à l'élément div qui le contient :

const button = document.getElementById('myButton');
const div = document.getElementById('myDiv');
button.addEventListener('click', function(event) {
  // 处理按钮单击事件
  event.stopPropagation();
});
div.addEventListener('click', function(event) {
  // 处理div单击事件
});

Ce code fonctionne en appelant la méthode stopPropagation() dans le gestionnaire d'événement click du bouton. bouillonnant jusqu'à l'élément div.

Résumé

En JavaScript, la fonctionnalité de désactivation peut être implémentée de différentes manières. Nous pouvons utiliser la méthode RemoveEventListener() pour annuler l'écouteur d'événement, utiliser les fonctions clearTimeout() et clearInterval() pour annuler le minuteur, utiliser la méthode PreventDefault() pour annuler le comportement par défaut et utiliser la méthode stopPropagation() pour annuler. l'événement bouillonne. Lors de l'implémentation de ces fonctions, nous devons veiller à les utiliser au moment approprié afin que notre code puisse effectuer correctement les opérations requises.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn