Comment faire pour copier un nœud DOM avec les écouteurs d'événement?

J'ai essayé

node.cloneNode(true); //deep copy

Il ne semble pas copier les écouteurs d'événement, que j'ai ajouté à l'aide de node.addEventListener("click", someFunc);.

Nous utilisons le Dojo de la bibliothèque.

InformationsquelleAutor Chakradar Raju | 2013-03-14
  1. 60

    cloneNode() ne copie pas les écouteurs d'événement. En fait, il n'y a aucun moyen de se procurer des écouteurs d'événement via le DOM, une fois qu'ils ont été attachés, de sorte que vos options sont les suivantes:

    • Ajouter tous les écouteurs d'événement manuellement à un clone de votre nœud
    • Restructurer le code pour utiliser l'événement de délégation de sorte que tous les gestionnaires d'événements sont attaché à un nœud qui contient à la fois l'original et le clone
    • Utiliser une fonction wrapper autour de Node.addEventListener() de garder une trace des auditeurs ajouté à chaque nœud. C'est de cette façon jQuery clone() méthode est capable de copier un nœud avec ses écouteurs d'événements, par exemple.
    • Ne vous déteste quand les mauvaises habitudes (javascript en ligne tels que onclick) sont plus pratique que de bon la vanille alternative? Soupir...
    • Les gens en général utiliser de mauvaises pratiques parce qu'ils sont plus à portée de main, n'est pas si bon.
    • Avez-vous peut-être avoir un exemple de code comment ajouter des écouteurs d'événement pour le code cloné?
    • vous devez connaître les événements les auditeurs ont été ajoutés, en premier lieu, et également avoir accès dans le code de l'endroit où vous avez fait le clonage, pour attribuer les rappels de nouveau, car l'accès à l'rappels peut être difficile selon où le clonage a eu lieu dans le code, donc un exemple sera inutile car il y a trop de scénarios.
    InformationsquelleAutor Tim Down
  2. 1

    Événement Délégation exemple.

    Après la lecture de Tim Bas de la réponse, j'ai trouvé délégué événements sont très faciles à mettre en œuvre, la résolution d'un problème similaire que j'ai eu. J'ai pensé que je voudrais ajouter un exemple concret, même si c'est en JQuery pas Dojo.

    Je suis re-skining d'une application dans la Sémantique de l'INTERFACE utilisateur, ce qui nécessite un petit morceau de JS pour rendre le message de fermer les boutons de travail. Cependant, les messages sont clonés à partir d'un modèle HTML de la balise à l'aide de document.importNode dans une bibliothèque. Cela signifie, même si je ne fixez les gestionnaires d'événements pour le modèle dans le nouveau code HTML, ils sont perdus pendant le clonage.

    Je ne peux pas faire de Tim option 1, tout simplement ré-attacher pendant le clonage comme la messagerie de la bibliothèque est frontal cadre agnostique. (Il est intéressant de noter mon précédent avant la fin de l'été dans Zurb Foundation, qui utilise une "data-fermable" attribut, la fonctionnalité de ce qui fait survivre le processus de clonage).

    La normal de gestion des événements, a été proposé comme ceci:

    $('.message .close').on('click', function() {
    $(this)
    .closest('.message')
    .transition('fade');
});

    Le problème ".message" à l'app-charger uniquement les matchs le même modèle, mais pas les messages qui arrivent plus tard sur le web sockets.

    Faire de ce délégué, signifiait la fixation de l'événement pour le conteneur dans lequel les messages sont clonés <div id="user-messages">

    Il devient donc:

    $('#user-messages').on('click', '.message .close', function() {
    $(this)
    .closest('.message')
    .transition('fade');
});

    Cela a fonctionné immédiatement, l'enregistrement de tous travaux complexes comme la troisième option d'emballage de la manifestation subs.

    La Dojo équivalent semble assez similaire dans son concept.

    InformationsquelleAutor scipilot
  3. 0

    Cela ne répond pas à la question exactement, mais si le cas d'utilisation permet de déplacement l'élément plutôt que copie, vous pouvez utiliser removeChild avec appendChild qui permettra de préserver les écouteurs d'événement. Par exemple:

    function relocateElementBySelector(elementSelector, destSelector) {
  let element = document.querySelector(elementSelector);
  let elementParent = element.parentElement;
  let destElement = document.querySelector(destSelector);
  elementParent.removeChild(element);
  destElement.appendChild(element);
}
    InformationsquelleAutor Richard Greenwood
  4. 0

    C'est ce que @JeromeJ été décrit dans un commentaire. Créer l'élément initial à l'aide de ce code HTML.

    <DIV ONCLICK="doSomething(this)">touch me</DIV>

    Lorsque vous clone de cet élément, le résultat sera le même gestionnaire, et "cette" pointe vers l'élément cloné.

    Ce serait formidable si le gestionnaire ONCLICK peuvent facilement être ajoutés en JavaScript. Cette approche signifie que vous avez à écrire une partie de votre code HTML.

    InformationsquelleAutor Trade-Ideas Philip