Comment créer des événements ponctuels en javascript

De nombreuses tâches JavaScript nécessitent des événements qui ne tirent qu'une seule fois. Pensez à une vignette qui charge une vidéo sur le premier clic, ou un bouton "plus" récupérant du contenu supplémentaire via Ajax. Le déclenchement à plusieurs reprises du même gestionnaire d'événements est inefficace et peut entraîner un comportement inattendu (par exemple, le chargement redondant des données). Heureusement, la création de gestionnaires d'événements à usage unique dans JavaScript est simple. Le processus implique généralement:

1. Attacher un gestionnaire: Un gestionnaire d'événements (une fonction) est affecté à un événement (comme un clic).
2. Exécution du gestionnaire: Le gestionnaire s'exécute lorsque l'événement se produit.
3. Retrait du gestionnaire: Le gestionnaire est ensuite détaché, empêchant une nouvelle exécution sur les événements ultérieurs.

Utilisation de la méthode one() de jQuery

Si vous utilisez jQuery, la solution la plus simple est la méthode one():

<code class="language-javascript">$("#myelement").one("click", function() {
  alert("This message appears only once!");
});</code>

Cela fonctionne comme d'autres méthodes d'événements jQuery. Pour une documentation détaillée, consultez l'API jQuery: https://www.php.cn/link/55e71b4408e917b9c7bb0df7d0b81af4 .

Handleurs d'auto-remi-reménagement (simple javascript)

En JavaScript ordinaire, toute fonction de gestionnaire peut se supprimer:

<code class="language-javascript">document.getElementById("myelement").addEventListener("click", handler);

function handler(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  alert("This message appears only once!");
}</code>

La ligne e.target.removeEventListener(e.type, arguments.callee); supprime le gestionnaire après sa première invocation. Cela fonctionne indépendamment du nom ou du type d'événement du gestionnaire. Notez que arguments.callee n'est pas pris en charge en mode strict; Dans JavaScript moderne, vous pouvez utiliser une fonction nommée et la référencer directement. Pour les versions IE plus anciennes, vous aurez besoin de detachEvent et du préfixe "ON" (par exemple, "onclick").

Une fonction d'événement unique réutilisable

Pour éviter d'écrire à plusieurs reprises le code de suppression, créez une fonction réutilisable:

<code class="language-javascript">function oneTimeEvent(node, type, callback) {
  node.addEventListener(type, function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    callback(e);
  });
}</code>

Utilisation:

<code class="language-javascript">oneTimeEvent(document.getElementById("myelement"), "click", function(e) {
  alert("This message appears only once!");
});</code>

Option de JavaScript moderne once

L'approche la plus moderne et sans doute la plus propre utilise l'option once: true dans addEventListener:

<code class="language-javascript">document.getElementById("myelement").addEventListener("click", function() {
  console.log("This will only run once!");
}, { once: true });</code>

Ceci est pris en charge par la plupart des navigateurs modernes et évite le besoin d'élimination manuelle.

Bien que ce ne soit pas toujours nécessaire, la compréhension de ces techniques pour créer des gestionnaires d'événements à usage unique offre une flexibilité et une efficacité précieuses dans vos projets JavaScript. Choisissez la méthode la mieux adaptée aux dépendances et au style de codage de votre projet.

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!