Que signifie la délégation d'événements javascript ?

En JavaScript, la délégation d'événements est également appelée hébergement d'événements ou proxy d'événements, qui consiste à lier l'événement du nœud cible au nœud ancêtre, elle utilise le principe de bouillonnement d'événements pour gérer tous les événements d'un certain type, en utilisant l'élément parent ; to Représente la méthode de gestion d'un certain type d'événement pour les éléments enfants.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

En JavaScript, la délégation d'événements (délégué) est également appelée hébergement d'événements ou proxy d'événements. Elle utilise le principe de bouillonnement d'événements pour gérer tous les événements d'un certain type et utilise l'élément parent pour représenter la méthode de traitement d'un certain type d'événement. de l'élément enfant.

Les avantages de cette opération : optimisez le code, améliorez les performances d'exécution, séparez véritablement HTML et JavaScript et évitez la perte des événements enregistrés pendant le processus d'ajout ou de suppression dynamique de nœuds.

Exemple 1

L'exemple suivant utilise une méthode générale pour lier l'événement click à chaque élément de liste dans la structure de liste, et une boîte de dialogue d'invite apparaîtra pour demander les informations textuelles contenues dans le. nœud actuel. Cependant, lorsque nous ajoutons dynamiquement des éléments de liste à la zone de liste, les éléments de liste nouvellement ajoutés ne sont pas liés à l'événement de clic, ce qui est contraire à nos souhaits.

<button id="btn">添加列表项目</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener(&#39;cluick&#39;, function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

Exemple 2

L'exemple suivant utilise des techniques de délégation d'événements et un mécanisme de propagation d'événements pour lier l'événement click sur l'élément ul de la list box. Lorsque l'événement est propagé au nœud parent ul, l'événement click est capturé et. puis l'événement est traité. La fonction détecte le type de nœud de réponse à l'événement actuel. S'il s'agit d'un élément li, exécutez ensuite le code suivant. Sinon, quittez la fonction de traitement d'événement et terminez la réponse.

<button id="btn">添加项目列表</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener(&#39;click&#39;, function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

Lorsqu'une page contient un grand nombre d'éléments et que chaque élément enregistre un ou plusieurs événements, les performances peuvent être affectées. Lors de l'accès et de la modification des nœuds DOM mis à jour, le programme sera plus lent ; en particulier lorsque le processus de connexion à l'événement se produit dans l'événement de chargement (ou DOMContentReady), il s'agit d'une période chargée pour toute page Web interactive riche. De plus, le navigateur doit enregistrer un enregistrement de chaque gestionnaire d'événements, ce qui occupera également plus de mémoire.

【Apprentissage recommandé : Tutoriel avancé javascript】

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!