Introduction détaillée à la délégation d'événements JavaScript (avec code)

Cet article vous apporte une introduction détaillée à la délégation d'événements JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La délégation d'événements (également connue sous le nom de proxy d'événements) utilise le bouillonnement d'événements pour gérer tous les événements d'un certain type en spécifiant un seul gestionnaire d'événements.

Il existe un exemple très frappant de « livraison express » concernant la délégation d'événements sur Internet. Ici, je vais y apporter quelques modifications et extensions, puis illustrer le mécanisme de délégation d'événements à travers des programmes.

Il y a trois employés dans une entreprise, et leur adresse de livraison express est l'entreprise. Chaque fois qu'une livraison express est livrée, le coursier appelle leur numéro pour les avertir, et ils vont récupérer le colis après réception du colis. appel.

员工ID	员工名称	联系方式
A	甲	111111
B	乙	222222
C	丙	333333

correspond à la page, c'est-à-dire que chaque employé est une marque :

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

Le comportement de chaque employé répondant au téléphone pour récupérer le coursier est un événement. Ici, nous supposons que le comportement de. récupérer le coursier correspond à l'événement onclick :

A.onclik = function() {
    收取快递；
};
B.onclick = function() {
    收取快递；
};
C.onclick = function() {
    收取快递；
};

Ce qui précède est généralement mis en œuvre en parcourant chaque employé et en ajoutant des événements :

/*程序1*/
var aUl = document.getElemengtByID("前台工作人员");
var aLi = aUl.getElemengtsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        收取快递;
    }
}

Comme vous pouvez le voir, définir un événement pour chaque employé générera du code redondant qui occupe de la mémoire et effectue plusieurs opérations DOM (en interaction avec les nœuds DOM), affectant les performances d'exécution des pages.

« La réduction des opérations DOM est l'une des idées principales de l'optimisation des performances »

Nous avons donc naturellement pensé : pourquoi le personnel de la réception ne peut-il pas signer pour la livraison express pour nous ?

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

/*程序2*/
var tel = document.getElementById("前台工作人员");
tel.onclick = function() {
    收取快递;
}

Supposons qu'à ce moment-là, le coursier appelle pour informer l'employé A de récupérer le colis (onclick), mais que le nœud DOM

🎜>onclick ( Le personnel récupère la livraison express. Comme vous pouvez le constater, de cette manière, non seulement la quantité de code est réduite, mais le nombre d'interactions avec les nœuds DOM est également réduit. Il y a un autre avantage : lors de l'ajout d'un nouveau nœud DOM, l'effet événementiel de l'élément parent est automatiquement reporté. En d'autres termes, lorsqu'un nouvel employé Ding arrive dans l'entreprise, le personnel de la réception l'aidera directement à récupérer la livraison express sans organiser d'événement spécialement pour lui.

Par exemple, lorsqu'un nouvel employé Ding arrive dans l'entreprise :

Dans un programme qui n'utilise pas de délégation d'événements, il n'y a pas d'événement pour l'employé nouvellement ajouté We. besoin d'utiliser une fonction Contenir le programme 1 :

...
<input type="button" id="btn" value="添加新员工">
...

...
/*程序3*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    var aLi = document.createElement("li");
    oLi.innerHTML = "员工丁";
    aUl.appendChild(aLi);
}
...

Ensuite, exécutez cette fonction à la fin du programme qui ajoute un nouvel employé D :

/*程序4*/
function pro1() {
    var aUl = document.getElemengtByID("前台工作人员");
    var aLi = aUl.getElemengtsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function() {
            收取快递;
        }
    }
}

L'inconvénient de ceci est évident : le nombre d'interactions de nœuds DOM multiplié.

Si nous utilisons le mécanisme de délégation d'événement pour implémenter cela, ce problème n'existera pas. L'événement onclick du nœud d'élément enfant sera exécuté directement sur le nœud d'élément parent.

/*程序5*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    ...
    pro1();
}

A ce stade, nous penserons : pour le même type d'événement, il est très pratique d'utiliser la délégation d'événement pour le placer sur le nœud de l'élément parent. Mais si vous souhaitez exécuter différents événements pour différents nœuds d'éléments enfants, pouvez-vous toujours utiliser la délégation d'événements ?

La réponse est oui.

Par exemple, les trois employés de l'entreprise ci-dessus utilisent toujours des marques fixes de livraison express :

L'employé A aime utiliser STO Express car c'est bon marché, et STO ne livre que dans le parc gate;

L'employé B est membre de JD.com et achète toujours les produits auto-exploités de JD.com, et JD.com les livrera en bas par livraison express

• L'employé C est un SF ; Express VIP et SF Express les livreront dans le hall de l'étage où ils se trouvent.
• Après que tous les trois ont reçu l'appel, le personnel de la réception a dû se rendre à différents endroits pour récupérer les articles. Pour les programmes qui n'utilisent pas la délégation d'événements, des événements de traitement uniques doivent être définis. pour chaque personne :

Au moins trois opérations DOM sont requises et des fonctions d'événement sont définies pour chaque nœud correspondant.

Et si la délégation d'événements est utilisée :

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");

A.onclick = function() {
    去园区大门取快递；
}
B.onclick = function() {
    去楼下取快递；
}
C.onclick = function() {
    去本层大厅取快递；
}

De cette façon, il n'y a qu'une seule opération DOM et d'autres opérations sont effectuées dans JS, ce qui peut améliorer efficacement les performances des pages Web.

Ce qui précède est l'idée de base de la délégation événementielle JS. En bref, la fonctionnalité de diffusion d'événements est utilisée pour gérer les événements, réduire le code redondant, réduire les créations inutiles et réduire les opérations interactives afin d'économiser de la mémoire et d'améliorer les performances.

var aUl = document.getElemengtByID("前台工作人员");
aUl.onclick = function (ev) {
    var target = ev || window.event; /*兼容浏览器*/
    var target = ev.target || ev.srcElement; /*兼容浏览器*/
    if (target.nodeName.toLocaleLowerCase() == "li") {
        switch(target.id) {
            case "A" :
                去园区大门取快递;
                break;
            case "B" :
                去楼下取快递;
                break;
            case "C" :
                去本层大厅取快递;
                break;
        }
    }
}

Bulling d'événement

Le bouillonnement d'événement se produit lorsqu'un nœud d'élément DOM est déclenché. Si le nœud n'a pas d'événement correspondant, vérifiez si son élément parent a un événement correspondant. Si tel est le cas, exécutez. sinon, continuez à vérifier vers le haut. A cela correspond la capture d'événement

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!