Qu'est-ce que DOM l'Événement délégation?

Cas de délégation permet d'éviter d'ajouter des écouteurs d'événement nœuds spécifiques; au lieu de cela, l'écouteur d'événement est ajouté à l'un des parents. Que l'écouteur d'événement analyse de barbotage événements de trouver une correspondance sur des éléments enfants.

Exemple En JavaScript :

Disons que nous avons un parent élément UL avec plusieurs éléments enfants:

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>

Disons aussi que quelque chose doit se produire lorsque chaque élément enfant est cliqué. Vous pouvez ajouter un événement distinct auditeur à chaque élément LI, mais que, si LI éléments sont fréquemment ajoutés et supprimés de la liste? L'ajout et la suppression d'écouteurs d'événement serait un cauchemar, surtout si l'ajout et la suppression de code dans différents endroits au sein de votre application. La meilleure solution est d'ajouter un écouteur d'événement pour le parent de l'élément UL. Mais si vous ajoutez un écouteur d'événement pour le parent, comment savez-vous quel élément a été cliqué?

Simple: lorsque l'événement se propage jusqu'à l'élément UL, vous cochez le cas propriété target de l'objet pour obtenir une référence à la réalité de cliqué sur le nœud. Voici une très simple bout de code JavaScript qui illustre événement délégation:

//Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
//e.target is the clicked element!
//If it was a list item
if(e.target && e.target.nodeName == "LI") {
    //List item found!  Output the ID!
    console.log("List item ", e.target.id.replace("post-"), " was clicked!");
       }
 });

Commencez par ajouter un écouteur d'événement clic de l'élément parent. Lorsque l'écouteur d'événement est déclenché, vérifiez l'événement élément pour s'assurer que c'est le type d'élément à réagir. Si c'est un élément LI, boom: nous avons ce que nous avons besoin! Si ce n'est pas un élément que nous voulons, l'événement peut être ignoré. Cet exemple est assez simple, UL et LI est une simple comparaison. Essayons quelque chose de plus difficile. Nous allons avoir un DIV parent avec beaucoup d'enfants, mais tous nous nous soucions de est un Un tag avec les classA classe CSS:

  //Get the parent DIV, add click listener...
  document.getElementById("myDiv").addEventListener("click",function(e) {
//e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
    //Get the CSS classes
    var classes = e.target.className.split(" ");
    //Search for the CSS class!
    if(classes) {
        //For every CSS class the element has...
        for(var x = 0; x < classes.length; x++) {
            //If it has the CSS class we want...
            if(classes[x] == "classA") {
                //Bingo!
                console.log("Anchor element clicked!");
                //Now do something here....
            }
        }
    }

  }
});

http://davidwalsh.name/event-delegate

Délégation est une technique où un objet exprime un certain comportement à l'extérieur, mais en réalité délègue la responsabilité de la mise en œuvre d'un comportement à un objet associé. Cela peut sembler au premier abord très similaire au modèle de proxy, mais il sert un autre but. Délégation est une abstraction d'un mécanisme qui centralise l'objet (méthode) le comportement.

Généralement parlées: utiliser la délégation comme alternative à l'héritage. L'héritage est une bonne stratégie, quand une relation étroite existe entre le parent et l'enfant objet, toutefois, l'héritage des couples d'objets de très près. Souvent, la délégation est la plus souple pour exprimer une relation entre les classes.

Ce modèle est également connu comme "proxy chaînes". Plusieurs autres modèles de conception de l'utilisation de la délégation de l'État, de la Stratégie et des Visiteurs et des Modèles en dépendent.

Cas de délégation est de gérer un événement qui bulles à l'aide d'un gestionnaire d'événement sur un élément de conteneur, mais seulement l'activation du gestionnaire d'événement du problème si l'événement s'est produit sur un élément dans le conteneur qui correspond à une condition donnée. Cela peut simplifier la gestion des événements sur les éléments à l'intérieur du conteneur.

Par exemple, supposons que vous souhaitez gérer un cliquez sur une cellule de tableau dans un tableau. Vous pourrait écrire une boucle pour accrocher un gestionnaire de clic sur chaque cellule...ou vous pouvez raccorder un gestionnaire de clic sur la table et utiliser l'événement de la délégation à la déclencher uniquement pour les cellules de tableau (et non pas en-têtes de tableau, ou les espaces à l'intérieur d'une ligne autour des cellules, etc.).

Il est également utile lorsque vous êtes va être l'ajout et la suppression d'éléments du conteneur, parce que vous n'avez pas à vous inquiéter au sujet de l'ajout et de la suppression des gestionnaires d'événements sur ces éléments; il suffit de raccorder l'événement sur le conteneur et la poignée de l'événement quand il bulles.

Voici un exemple simple (c'est intentionnellement détaillé pour permettre inline explication): la Manipulation d'un clic sur n'importe quel td élément dans un conteneur de table:

JS:

//Handle the event on the container
document.getElementById("container").addEventListener("click", function(event) {
    //Find out if the event targeted or bubbled through a `td` en route to this container element
    var element = event.target;
    var target;
    while (element && !target) {
        if (element.matches("td")) {
            //Found a `td` within the container!
            target = element;
        } else {
            //Not found
            if (element === this) {
                //We've reached the container, stop
                element = null;
            } else {
                //Go to the next parent in the ancestry
                element = element.parentNode;
            }
        }
    }
    if (target) {
        console.log("You clicked a td: " + target.textContent);
    } else {
        console.log("That wasn't a td in the container table");
    }
});

CSS:

table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
th, td {
    padding: 4px;
    border: 1px solid #ddd;
    font-weight: normal;
}
th.rowheader {
    text-align: left;
}
td {
    cursor: pointer;
}

HTML:

<table id="container">
    <thead>
        <tr>
            <th>Language</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="rowheader">English</th>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
        <tr>
            <th class="rowheader">Español</th>
            <td>uno</td>
            <td>dos</td>
            <td>tres</td>
        </tr>
        <tr>
            <th class="rowheader">Italiano</th>
            <td>uno</td>
            <td>due</td>
            <td>tre</td>
        </tr>
    </tbody>
</table>

Avant d'entrer dans les détails, rappelons-nous comment les événements DOM travail.

DOM événements sont expédiés à partir du document de l'élément cible (le capture phase), puis de la bulle de l'élément cible, le document (le bouillonnement phase). Ce graphique dans l'ancien DOM3 événements spec (maintenant remplacé, mais le graphique est toujours valable) le montre très bien:

Pas tous les événements de la bulle, mais la plupart le font, y compris click.

Les commentaires dans l'exemple de code ci-dessus décrivent la façon dont il fonctionne. correspond à vérifie si un élément correspond à un sélecteur CSS, mais bien sûr, vous pouvez vérifier si quelque chose correspond à vos critères dans d'autres façons, si vous ne voulez pas utiliser un sélecteur CSS.

Que le code est écrit pour appeler les différentes étapes avec beaucoup de détails, mais vaguement les navigateurs modernes (et aussi sur IE si vous utilisez un polyfill), vous pouvez utiliser proche et contient au lieu de la boucle:

var target = event.target.closest("td");
    console.log("You clicked a td: " + target.textContent);
} else {
    console.log("That wasn't a td in the container table");
}

Live Exemple:

JS:

//Handle the event on the container
document.getElementById("container").addEventListener("click", function(event) {
    var target = event.target.closest("td");
    if (target && this.contains(target)) {
        console.log("You clicked a td: " + target.textContent);
    } else {
        console.log("That wasn't a td in the container table");
    }
});

CSS:

table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
th, td {
    padding: 4px;
    border: 1px solid #ddd;
    font-weight: normal;
}
th.rowheader {
    text-align: left;
}
td {
    cursor: pointer;
}

HTML:

<table id="container">
    <thead>
        <tr>
            <th>Language</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="rowheader">English</th>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
        <tr>
            <th class="rowheader">Español</th>
            <td>uno</td>
            <td>dos</td>
            <td>tres</td>
        </tr>
        <tr>
            <th class="rowheader">Italiano</th>
            <td>uno</td>
            <td>due</td>
            <td>tre</td>
        </tr>
    </tbody>
</table>

closest vérification de l'élément que vous appeler pour voir si elle correspond à la donnée sélecteur CSS et, si elle ne renvoie le même élément; dans le cas contraire, il vérifie si l'élément parent pour voir si elle correspond, et renvoie le parent si oui; dans le cas contraire, il vérifie le parent du parent, etc. Donc, il trouve le "plus proche" de l'élément dans l'ancêtre de la liste qui correspond au sélecteur. Depuis que pourraient aller au-delà de l'élément conteneur, le code ci-dessus utilise contains de vérifier si un élément correspondant a été trouvé, c'est dans le conteneur — depuis par d'accroche de l'événement sur le conteneur, vous avez indiqué que vous ne voulez gérer les éléments dans conteneur.

Pour en revenir à notre exemple de table, ce qui signifie que si vous avez un tableau dans une cellule de tableau, il ne correspondra pas à la cellule du tableau contenant la table:

JS:

//Handle the event on the container
document.getElementById("container").addEventListener("click", function(event) {
    var target = event.target.closest("td");
    if (target && this.contains(target)) {
        console.log("You clicked a td: " + target.textContent);
    } else {
        console.log("That wasn't a td in the container table");
    }
});

CSS:

table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
th, td {
    padding: 4px;
    border: 1px solid #ddd;
    font-weight: normal;
}
th.rowheader {
    text-align: left;
}
td {
    cursor: pointer;
}

HTML:

<!-- The table wrapped around the #container table -->
<table>
    <tbody>
        <tr>
            <td>
                <!-- This cell doesn't get matched, thanks to the `this.contains(target)` check -->
                <table id="container">
                    <thead>
                        <tr>
                            <th>Language</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th class="rowheader">English</th>
                            <td>one</td>
                            <td>two</td>
                            <td>three</td>
                        </tr>
                        <tr>
                            <th class="rowheader">Español</th>
                            <td>uno</td>
                            <td>dos</td>
                            <td>tres</td>
                        </tr>
                        <tr>
                            <th class="rowheader">Italiano</th>
                            <td>uno</td>
                            <td>due</td>
                            <td>tre</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                This is next to the container table
            </td>
        </tr>
    </tbody>
</table>

Un délégué en C# est semblable à un pointeur de fonction en C ou C++. À l'aide d'un délégué permet au programmeur d'encapsuler une référence à une méthode à l'intérieur d'un délégué de l'objet. Le délégué de l'objet peut ensuite être transmis à un code qui peut appeler référencé dans la méthode, sans avoir à connaître au moment de la compilation de la méthode qui sera invoquée.

Voir ce lien --> http://www.akadia.com/services/dotnet_delegates_and_events.html