DOM onmouseover 未出现

Question

我试图在表中创建新行时插入 onmouseover，但它没有出现。我错过了一些愚蠢的事情吗？

    var row = document.createElement("TR");
    row.id = i;
    row.onmouseover = hover(i);
    var td1 = document.createElement("TD");
    row.appendChild(td1);
    tbody.appendChild(row);

变量“i”是循环中的当前数字。该行的 ID 看起来不错，但鼠标悬停时却不然。

Answer 1

使用匿名函数为 i 的值创建闭包，并确保将函数设置为 onmouseover，而不是调用函数的结果：

var row = document.createElement("TR");
(function (i) {
    row.onmouseover = function () { hover(i) };
})(row.id);
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);

---

Taking a proper look at your code, it appears that you're not actually setting the id attribute of the TR element. However, you might want to avoid that entirely and use this context inside the hover function:

var row = document.createElement("TR");
row.onmouseover = hover;
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);

function hover() { 
    alert(this.rowIndex);  // <-- `this` refers to the row element
}

Answer 2

您正在将函数的结果分配给事件。

需要类似于

row.onmouseover=function(){hover(this);}

最好使用它，因为您拥有 DOM 对象并且不必查找任何内容。

function hover( row ){
     row.style.color = "red";
}

如果您仍然要走我的路，您需要更改您的 ID，使其有效。 Id 不能以数字开头。

var row = document.createElement("TR");
row.id = "row_i";
row.onmouseover = function(){ hover(this.id); }
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);

Answer 3

也许尝试：

row.onmouseover = function() { hover(i); };