Ajout d'un gestionnaire d'événements (avec paramètres) à l'élément créé à l'aide de document.createElement

Question

Dans la fonction ci-dessous, j'essaie de créer un élément dynamique (textArea). J'essaie de lier une fonction (redimensionner) à la zone de texte en utilisant textArea.onclick = redimensionner; qui fonctionne bien.

Ce que je voudrais faire est de passer un paramètre à la fonction de modification de taille (soit l'identifiant généré ou, si possible, le textArea lui-même)

function addElement(elm, event) { 
     var textArea = document.createElement('textarea'); 
     var id = Math.random(); 
     textArea.setAttribute('id', id) 
     textArea.setAttribute('cols', 1); 
     textArea.setAttribute('rows', 3); 
     textArea.onclick = resize; 
     elm.appendChild(textArea); 
    } 

si je dis textArea.onclick = Modifier la taille (id); alors cela appelle simplement la fonction.

Comment puis-je lier la fonction et lui transmettre un paramètre?

Answer 1

Utilisez une fermeture:

textArea.onclick = function() { resize(id); }; 

Ou utiliser l'attribut id éléments:

textArea.onclick = function() { resize(this.id); }; 

Answer 2

Vous pouvez accéder à l'identifiant et le textarea de l'objet événement lui-même. Dans la fonction de modification de taille, accéder à la zone de texte, puis l'id comme:

function resize(event) { 
    var textarea = event.target; 
    var id = textarea.id; 
} 

Answer 3

Vous pouvez créer une fonction appelée Redimensionnement d'une autre fonction.

 function addElement(elm, event) { 
     var textArea = document.createElement('textarea'); 
     var id = Math.random(); 
     textArea.setAttribute('id', id) 
     textArea.setAttribute('cols', 1); 
     textArea.setAttribute('rows', 3); 
     textArea.onclick = createResizeFunction(textArea); // assign resize 
                  //function 
     elm.appendChild(textArea); 
    } 

    function createResizeFunction(textArea) { 
     var resize = function() { 
      var id = textArea.id; 
      // do something with that id 
     }; 
     return resize; 
    }