Question

在下面的函数中，我正在尝试创建一个动态元素（textArea）。我正在尝试使用 textArea.onclick = resize; 将函数（resize）绑定到文本区域，这样可以正常工作。

我想要做的是将参数传递给resize函数（生成的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);
    }

如果我说 textArea.onclick = resize（id）; 那么只调用该函数。

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

Answer 1

使用闭包：

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

或使用元素id属性：

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

Answer 2

您可以从事件对象本身访问id和textarea。在resize函数中，访问textarea，然后将id作为：

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

将事件处理程序（带参数）添加到使用document.createElement创建的元素

3 个答案: