Question

我正在阅读Jeremy Keith撰写的DOM脚本并测试jsLint中的代码

在这里的代码示例中，我收到一条错误，上面写着“”不要在循环中创建函数“。
当我尝试修复它时，我似乎正在失去这个
我需要看一个如何修复此错误的示例。
这是jsfiddle：http://jsfiddle.net/pkdsleeper/ejvMj/

提前致谢

轨枕

Answer 1

可能是这样的：

var initMouseover = function() {
    return function () {
        this.style.backgroundColor = "crimson";
        this.style.color = "#ffffff";
    };
};

然后在for循环中你有：

current_row.onmouseover = initMouseover();

我在你发布的链接上测试它似乎工作，也不再显示此错误。

Answer 2

这样做的一种方法是在循环外定义局部函数：

(function highlightRows() {

    "use strict";

    if (!document.getElementById || !document.getElementsByTagName) { return false; }

    function handleMouseOver () {
        this.style.backgroundColor = "crimson";
        this.style.color = "#ffffff";
    }

    function handleMouseOut() {
        this.style.backgroundColor = "transparent";
        this.style.color = "#000000";
    }


    var tbl = document.getElementById("tbl_example"), // get the table
        rows = tbl.getElementsByTagName("tr"), // get all the table rows
        i,
        current_row;

    // loop through rows adding style info to the mouseover/mouseout events
    for (i = 0; i < rows.length; i++) {
        current_row = rows[i];

        // cancel highlight of th row
        if (current_row.parentNode.tagName === "THEAD") { 
            continue;
        }

        current_row.onmouseover = handleMouseOver;
        current_row.onmouseout = handleMouseOut;
    }    
}())

在jsFiddle中工作：http://jsfiddle.net/jfriend00/aKfWs/。

Answer 3

您的代码似乎正常工作。事件处理函数中的this是指触发事件的DOM对象，它是<tr>元素。因此，您可以通过修改this的属性来更改样式。您也可以通过函数参数访问同一个对象。

current_row.onmouseover = function (event) {
            console.log(this == event.currentTarget);
}

这会将true记录到控制台，因为this和event.currentTarget是相同的DOM元素对象。

但是，你是正确的，因为在for循环的范围内，this（你没有在那个确切的范围内使用）是顶级window对象，但在事件处理函数中，this是一个不同的对象。

关于jsLint错误的问题：“不要在循环中创建函数”

3 个答案: