Question

可能重复：
How to pass arguments to an event handler function and still use ‘this’ reference?

我已经做了一些搜索，但我很难找到解决方案，所以如果有人认为这是重复我会很感激你说明你输入的内容...似乎我的搜索能力已经过了一天关！：无论如何：

function CreateMe(){

    //....

    var mycell = row.insertCell(-1);
    var myelement3 = document.createmyelement("input");
    myelement3.type = "button";
    myelement3.value = "Delete";
    myelement3.onclick = DeleteMe;
    myelement3.name = "Delete[]";
    mycell.appendChild(myelement3);

    //....

}

function DeleteMe(){
    alert(this);
}

我有一个带有按钮的表单，该按钮调用 CreateMe ，动态创建一个按钮。我所追求的是当单击此动态按钮时能够将参数传递给 DeleteMe 函数;尤其是：

onclick="DeleteMe(this.parentNode.parentNode.rowIndex)"

来自：http://www.java2s.com/Code/JavaScript/HTML/Deletingtablerows.htm

我对如何前进这里感到有些失落，所以如果有人可以伸出援助之手，我们将不胜感激。

编辑：为了清楚起见，我要问的是如何将动态生成按钮的onclick事件中的参数传递给 DeleteMe 函数。很明显，我无法做到这一点，因为这只会立即评估函数：

    myelement3.value = "Delete";
    myelement3.onclick=DeleteMe(this.parentNode.parentNode.rowIndex);
    myelement3.name = "Delete[]";

Answer 1

你快到了。 .onclick应该是一个函数，所以你要做的就是将该函数调用包装到另一个函数中：

myelement3.onclick = function() { 
    DeleteMe(this.parentNode.parentNode.rowIndex);
    // or
    // DeleteMe.call(this, this.parentNode.parentNode.rowIndex);
    // to set `this` inside `DeleteMe` to the DOM element as well.
};

如果浏览器支持.bind，您甚至可以执行以下操作：

myelement3.onclick = DeleteMe.bind(
    myelement3, 
    myelement3.parentNode.parentNode.rowIndex
);

但是这会在创建时评估myelement3.parentNode.parentNode.rowIndex，而不是在点击元素时评估。如果元素改变了它们的位置，这可能会导致问题，在这种情况下，你宁愿选择第一个解决方案。

替代方案，因为this引用了被点击的元素，您可以访问DeleteMe 中的行索引：

function DeleteMe(){ var index = this.parentNode.parentNode.rowIndex; } // ... myelement3.onclick = DeleteMe;

只要您将DeleteMe仅作为事件处理程序而非手动调用，就可以正常工作。

Answer 2

你可以试试这个

function DeleteMe(e){
    e = e || window.event;
    var el = e.target || e.srcElement;
    // here el is your button that's been clicked
    alert(el.parentNode.parentNode.rowIndex);
}

使用onclick参数动态创建按钮

2 个答案: