2

这有效（在 Firefox 中）...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="src/myJS.js"></script>
</head>
<body></body>
</html>

Javascript 文件（为方便起见称为 myJS.js）

window.onload = function()
{
    CreateInputTable();
};

CreateInputTable = function()
{
    var tbl = document.createElement('table');
    var tbo = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var ib = document.createElement('input');
    ib.setAttribute('type', 'text');

    var tdID = "c1"; // Cell reference

    if (ib.addEventListener)// all browsers except IE before version 9 - see http://help.dottoro.com/ljeuqqoq.php
        {
            ib.addEventListener('change', foo, false);
        }
    else// IE before version 9 - see http://help.dottoro.com/ljeuqqoq.php
        {
            ib.attachEvent('change', foo, false);       
        };

    td1.appendChild(ib);
    tr.appendChild(td1);

    var td2 = document.createElement('td');
    td2.setAttribute('id', tdID);
    td2.appendChild(document.createTextNode("Hello world"));
    tr.appendChild(td2);

    tbo.appendChild(tr);
    tbl.appendChild(tbo);
    document.getElementsByTagName('body')[0].appendChild(tbl);
};

function foo (){
    if (document.getElementById("c1"))
        {
        document.getElementById("c1").appendChild(document.createTextNode(" and goodbye"));             
        }
};

但是，我想动态地将单元格引用“c1”传递给事件侦听器。

如果我理解正确，我无法将呼叫更改为...

ib.addEventListener('change', foo(tdID), false);

因为括号将返回 的返回值foo，而不是foo作为函数。

但是，我可以通过将 tdID 的声明更改为

this.var tdID = "c1";

... 和 foo 到

function foo (){
    if (document.getElementById(tdID))
        {
        document.getElementById(tdID).appendChild(document.createTextNode(" and goodbye"));             
        }
};

如果我理解正确，它可以工作，因为在 .infoo中被调用CreateInputTable，这意味着它可以在CreateInputTable.

但是，这不会给我我想要的，因为我想为 tdID 创建一个具有新值的第二行。上面的示例似乎只是将单元格引用硬编码为foo.

如何动态地将单元格引用传递给foo（以面向对象的样式）？

4

1 回答 1

0

一种优雅的方式是这样的：

function foo (tdID){
    return function(){
        if (document.getElementById(tdID))
        {
            document.getElementById(tdID).appendChild(document.createTextNode(" and goodbye"));             
        }
    }
};

然后你实际上可以写

ib.addEventListener('change', foo(tdID), false);

因为调用foo(tdID9)将返回一个具有正确数量参数的函数，并且“知道” `tdID' 的正确值，因为它是在内部函数的闭包中捕获的。

这种技术称为柯里化。

于 2013-01-10T12:41:27.410 回答