动态addEventListener和节点引用

dom events - Javascript Dynamically addEventListener and Node Reference

本文关键字：引用 节点 addEventListener 动态      更新时间：2023-09-26

这行得通(在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"));             
        }
};

如果我理解正确的话，它可以工作，因为foo在CreateInputTable中被调用，这意味着它可以看到CreateInputTable中的this变量。

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

我如何动态地传递单元引用到foo(在面向对象的风格)?

一种优雅的方式是:

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'的正确值，因为它是在内部函数的闭包中捕获的。

相关文章：