4

可能重复：
如何将参数传递给事件处理函数并仍然使用“this”引用？

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

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[]";
4

2 回答 2

7

你快到了。.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仅作为事件处理程序调用而不是手动调用，这就会起作用。

于 2012-12-26T00:17:33.033 回答
0

你可以试试这个

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);
}​
于 2012-12-25T23:51:39.513 回答