向使用document.createElement

Question

创建的元素添加事件处理函数（带参数）在下面的函数中，我试图创建一个动态元素（textArea）。我试图使用将文本区域（调整大小）绑定到文本区域textArea.onclick = resize;这工作正常。

我希望做的是，如果我说textArea.onclick =调整参数传递给调整大小功能（无论是生成的ID或者，如果可能的话，textarea的本身），

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); 
    } 

（ ID）;然后只是调用该函数。

我该如何绑定函数，并将参数传递给它？

Answer 1

使用闭包：

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

或者使用元素id属性：

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

Answer 2

您可以访问id和textarea的从事件对象本身。在调整大小功能中，访问textarea，然后将其标识为：

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

Answer 3

您可以从另一个函数创建一个名为resize的函数。

 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; 
    }