gpt4 book ai didi

Javascript 动态添加事件监听器和节点引用

转载 作者:行者123 更新时间:2023-11-30 06:36:16 26 4
gpt4 key购买 nike

这有效(在 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' 的正确值,因为它是在内部函数的闭包中捕获的.

此技术称为 currying .

关于Javascript 动态添加事件监听器和节点引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14257871/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com