如何在循环中将参数正确传递给参数化事件处理程序？ [英] How do I properly pass a parameter to a parameterized event handler in a loop?
问题描述
我有以下用于测试的HTML文件...
< html>
< head>
< script type =" text / javascript">
<！ -
function handleWindowLoad（）{
var items = [];
for（var i = 0; i< 11; i ++）{
items [i] =" item" +（i + 1）;
}
var parent = document.getElementById（" parent"）;
for （var i = 0; i< items.length - 1; i ++）{
var child = document.createElement（" div"）;
child.innerHTML = items [i];
var currentItem = items [i];
handler = new Object（）;
handler.currentItem = currentItem ;
handler.onclick = function（）{
handleButtonClick.call（handler）;
}
child .attachEvent（''onclick''，handler.onclick）;
parent.appendChild（child）;
}
}
window.onload = handleWindowLoad;
函数handleButtonClick（）{
alert（this.currentItem）;
}
// - >
< / script>
< / head>
< body>
< div id =" parent">
< / div>
< / body> < br $> b $ b< / html>
我想要什么是for handleButtonClick函数显示
用户点击的每个项目的
文本" item1"，" item2"等等的提醒。相反，它显示item10。对于父元素的每个孩子。
但我不明白为什么。我认为代码会为每个子元素创建一个
闭包（我正确地使用这个术语吗？）但是它显然不是
。任何人都可以为我提供一个解决方案，可以清理我的混乱吗？
我也从他们可以看到的封口是坏的
经常是内存泄漏的原因。是否有一种无记忆泄漏的方式来实现与上面的代码相同的东西？
感谢您的时间。
2005-12-29，Sean Dockery< do ********* @ gmail.com>写道：我有以下用于测试的HTML文件...
function handleWindowLoad（）{
var items = [];
for（var i = 0; i< 11; i ++）{
items [i] =" item" +（i + 1）;
}
for（var i = 0; i< items.length - 1; i ++）{
var child = document.createElement（" div"）;
child.innerHTML = items [i];
var currentItem = items [i];
handler = new Object（）;
handler.currentItem = currentItem;
handler.onclick = function（）{
handleButtonClick.call（handler）;
}
if（child.attachEvent）
child.attachEvent（''onclick''，handler.onclick）;
else
child.onclick = handler.onclick; parent.appendChild（child）;
}
}
window.onload = handleWindowLoad;
函数handleButtonClick（）{
alert（this.currentItem） ;
}
我想要的是handleButtonClick函数用于显示带有
文本item1，item2等的警报，等等于每个被点击的项目
用户。相反，它显示item10。对于父元素的每个孩子。
但我不明白为什么。我认为代码会为每个子元素创建一个
闭包（我正确使用这个术语吗？），但它显然不是。任何人都可以为我提供一个解决方案，可以解决我的困惑吗？
你有一个闭包，但是你的闭包是指变量
handleWindowLoad（）
我还读过闭包是从他们的观点来看，它们通常可能是内存泄漏的原因。是否有一种无记忆泄漏的方式来实现与上面的代码相同的东西？
从事件中获取目标对象... 。
再见。
Jasen
Sean Dockery写道：我有以下用于测试的HTML文件...
< html>
< head>
< script type =" text / javascript">
<！ -
不要在脚本元素中使用HTML注释分隔符，它们不是
执行任何有用的操作并且可能有害。
函数handleWindowLoad（）{
var items = [];
for（var i = 0; i< ; 11; i ++）{
items [i] =" item" +（i + 1）;
}
这个数组是没有必要的。
var parent = document.getElementById （" parent"）;
for（var i = 0; i< items.length - 1; i ++）{
var child = document.createElement（" div"）;
child.innerHTML = items [i];
var currentItem = items [i];
handler = new Object（）;
handler.currentItem = currentItem;
handler.onclick = function（）{
handleButtonClick.call（handler）;
}
child.attachEvent（''onclick''，handler.onclick）;
attachEvent适用于IE和其他复制它的事件模型的人，但
剩下的呢？为W3C浏览器添加一个用于addEventListener的分支。
但无论如何它看起来更简单：
child.onclick = handler.onclick ;
parent.appendChild（child）;
}
}
window.onload = handleWindowLoad;
函数handleButtonClick （）{
alert（this.currentItem）;
}
// - >
< / script>
< / head>
< body>
< div id =" parent">
< / div>
< / body>
< / html>
我想要的是handleButtonClick函数为
用户点击的每个项目显示带有
文本" item1"，" item2"等的提醒。相反，它显示item10。对于父元素的每个子元素。
然后将div id设置为''item1''，''item2''等等，然后
handleButtonClick变为 - alert（这个。 id）。
你需要说出什么是重要的。你真的想要什么？
商店，对新div或文字''item1'''''item2''等的引用？
但我不明白为什么。我认为代码会为每个子元素创建一个
闭包（我正确使用这个术语吗？），但它显然不是。任何人都可以为我提供一个解决方案，可以解决我的困惑吗？
您正在创建一个闭包，因此您的参考始终是最后一个
''''''''''''''''''''''''''''''''''''''''''''''时间每个div
创建了。
至于如何避免它，有很多方案，但这取决于什么
你真的想要这样做。
我还读到，从他们可能经常导致内存泄漏的角度来看，闭包很糟糕。是否有一种无记忆泄漏的方式来实现与上面的代码相同的东西？
是的，见上文。一个解决方案（？）如下：
函数handleWindowLoad（）
{
var numOf = 10;
var child，txt;
var parent = document.getElementById（" parent"）;
for（var i = 0; i< numOf; + + i）{
child = document.createElement（" div"）;
txt =''item''+（i + 1）;
child.appendChild（document.createTextNode（txt））;
child.id = txt;
child.onclick = handleButtonClick;
parent.appendChild（孩子）;
}
}
函数handleButtonClick（）
{
alert（this.id）;
}
window.onload = handleWindowLoad;
-
Rob
" Jasen Betts" < JA *** @ free.net.nospam.nz>在留言中写道
news：42 ***************** @ clunker.homenet ...2005-12 -29，Sean Dockery< do ********* @ gmail.com>写道：我有以下用于测试的HTML文件...
function handleWindowLoad（）{
var items = [];
for（var i = 0; i< 11; i ++）{
items [i] =" item" +（i + 1）;
}
for（var i = 0; i< items.length - 1; i ++）{
var child = document.createElement（" div"）;
child.innerHTML = items [i];
var currentItem = items [i];
handler = new Object（）;
handler.currentItem = currentItem;
handler.onclick = function（）{
handleButtonClick.call（handler）;
}
if（child.attachEvent）
child.attachEvent（''onclick''，handler.onclick）;
child.onclick = handler.onclick;parent.appendChild（child）;
}
}
window.onload = handleWindowLoad;
函数handleButtonClick（）{
alert （this.currentItem）;
}
我想要的是handleButtonClick函数用
文本显示警告" item1"，" item2"，and对于
用户点击的每个项目，等等。相反，它显示item10。对于父元素的每个孩子。
但我不明白为什么。我认为代码会为每个子元素创建一个
闭包（我正确使用这个术语吗？），但它显然不是。任何人都可以为我提供一个解决方案，可以清除
我的困惑吗？
你有一个闭包但你的关闭是指
的变量handleWindowLoad（）
我相信在这一点上我可以安全地说我不太明白
闭包是什么。我原以为它们类似于Java中的匿名内部
类，但似乎情况并非如此。
我还读到，从他们可能经常导致内存泄漏的角度来看，闭包是不好的。有没有内存泄漏的方法来实现与上面的代码相同的东西？
从事件中获取目标对象....
你能提供一个例子吗？
再见。
Jasen
I have the following HTML file that I''ve been using for testing...
<html>
<head>
<script type="text/javascript">
<!--
function handleWindowLoad() {
var items = [];
for (var i = 0; i < 11; i++) {
items[i] = "item" + (i + 1);
}
var parent = document.getElementById("parent");
for (var i = 0; i < items.length - 1; i++) {
var child = document.createElement("div");
child.innerHTML = items[i];
var currentItem = items[i];
handler = new Object();
handler.currentItem = currentItem;
handler.onclick = function() {
handleButtonClick.call(handler);
}
child.attachEvent(''onclick'', handler.onclick);
parent.appendChild(child);
}
}
window.onload = handleWindowLoad;
function handleButtonClick() {
alert(this.currentItem);
}
//-->
</script>
</head>
<body>
<div id="parent">
</div>
</body>
</html>
What I want is for the handleButtonClick function to show an alert with the
text "item1", "item2", and so forth for each of the items clicked by the
user. Instead, it shows "item10" for every child of the parent element.
But I don''t understand why. I thought that the code would be creating a
closure (am I using this term correctly?) for each child element, but it
apparently is not. Can anyone provide me with a solution that can clear up
my confusion?
I have also read that closures are bad from the point of view that they can
often be the cause of memory leaks. Is there a memory-leak-less way to
achieve the same thing that as the code above?
Thanks for your time.
On 2005-12-29, Sean Dockery <do*********@gmail.com> wrote:I have the following HTML file that I''ve been using for testing...
function handleWindowLoad() {
var items = [];
for (var i = 0; i < 11; i++) {
items[i] = "item" + (i + 1);
}
var parent = document.getElementById("parent");
for (var i = 0; i < items.length - 1; i++) {
var child = document.createElement("div");
child.innerHTML = items[i];
var currentItem = items[i];
handler = new Object();
handler.currentItem = currentItem;
handler.onclick = function() {
handleButtonClick.call(handler);
} if(child.attachEvent)
child.attachEvent(''onclick'', handler.onclick);
else
child.onclick=handler.onclick; parent.appendChild(child);
}
}
window.onload = handleWindowLoad;
function handleButtonClick() {
alert(this.currentItem);
} What I want is for the handleButtonClick function to show an alert with the
text "item1", "item2", and so forth for each of the items clicked by the
user. Instead, it shows "item10" for every child of the parent element.
But I don''t understand why. I thought that the code would be creating a
closure (am I using this term correctly?) for each child element, but it
apparently is not. Can anyone provide me with a solution that can clear up
my confusion?
you have a closure but your closure refers to the variables of
handleWindowLoad()
I have also read that closures are bad from the point of view that they can
often be the cause of memory leaks. Is there a memory-leak-less way to
achieve the same thing that as the code above?
get the target object from the event....
Bye.
Jasen
Sean Dockery wrote:I have the following HTML file that I''ve been using for testing...
<html>
<head>
<script type="text/javascript">
<!--
Don''t use HTML comment delimiters inside script elements, they don''t
do anything useful and are potentially harmful.
function handleWindowLoad() {
var items = [];
for (var i = 0; i < 11; i++) {
items[i] = "item" + (i + 1);
}
This array isn''t necessary.
var parent = document.getElementById("parent");
for (var i = 0; i < items.length - 1; i++) {
var child = document.createElement("div");
child.innerHTML = items[i];
var currentItem = items[i];
handler = new Object();
handler.currentItem = currentItem;
handler.onclick = function() {
handleButtonClick.call(handler);
}
child.attachEvent(''onclick'', handler.onclick);
attachEvent is OK for IE and others that copy it''s event model, but
what about the rest? Add a fork for addEventListener for W3C browsers.
But in any case it seems simpler to use:
child.onclick = handler.onclick;
parent.appendChild(child);
}
}
window.onload = handleWindowLoad;
function handleButtonClick() {
alert(this.currentItem);
}
//-->
</script>
</head>
<body>
<div id="parent">
</div>
</body>
</html>
What I want is for the handleButtonClick function to show an alert with the
text "item1", "item2", and so forth for each of the items clicked by the
user. Instead, it shows "item10" for every child of the parent element.
Then set the div id to ''item1'', ''item2'', etc. and then the
handleButtonClick becomes - alert(this.id).
You need to say what is important here. What do you really want to
store, a reference to the new div or the text ''item1'', ''item2'', etc?
But I don''t understand why. I thought that the code would be creating a
closure (am I using this term correctly?) for each child element, but it
apparently is not. Can anyone provide me with a solution that can clear up
my confusion?
You are creating a closure, hence your reference is always to the last
''item'' created, not to the one that was attached at the time each div
was created.
As to how to avoid it, there are many schemes but it depends on what
you are really trying to do.
I have also read that closures are bad from the point of view that they can
often be the cause of memory leaks. Is there a memory-leak-less way to
achieve the same thing that as the code above?
Yes, see above. One solution(?) is below:
function handleWindowLoad()
{
var numOf = 10;
var child, txt;
var parent = document.getElementById("parent");
for (var i=0; i<numOf; ++i) {
child = document.createElement("div");
txt = ''item'' + (i + 1);
child.appendChild(document.createTextNode(txt));
child.id = txt;
child.onclick = handleButtonClick;
parent.appendChild(child);
}
}
function handleButtonClick()
{
alert(this.id);
}
window.onload = handleWindowLoad;
--
Rob
"Jasen Betts" <ja***@free.net.nospam.nz> wrote in message
news:42*****************@clunker.homenet...On 2005-12-29, Sean Dockery <do*********@gmail.com> wrote:I have the following HTML file that I''ve been using for testing...function handleWindowLoad() {
var items = [];
for (var i = 0; i < 11; i++) {
items[i] = "item" + (i + 1);
}
var parent = document.getElementById("parent");
for (var i = 0; i < items.length - 1; i++) {
var child = document.createElement("div");
child.innerHTML = items[i];
var currentItem = items[i];
handler = new Object();
handler.currentItem = currentItem;
handler.onclick = function() {
handleButtonClick.call(handler);
}
if(child.attachEvent)
child.attachEvent(''onclick'', handler.onclick);
else
child.onclick=handler.onclick;parent.appendChild(child);
}
}
window.onload = handleWindowLoad;
function handleButtonClick() {
alert(this.currentItem);
}
What I want is for the handleButtonClick function to show an alert with
the
text "item1", "item2", and so forth for each of the items clicked by the
user. Instead, it shows "item10" for every child of the parent element.
But I don''t understand why. I thought that the code would be creating a
closure (am I using this term correctly?) for each child element, but it
apparently is not. Can anyone provide me with a solution that can clear
up
my confusion?
you have a closure but your closure refers to the variables of
handleWindowLoad()
I believe at this point that I can safely say that I don''t really understand
what a closure is. I had assumed that they were similar to anonymous inner
classes in Java, but it seems that is not the case.
I have also read that closures are bad from the point of view that they
can
often be the cause of memory leaks. Is there a memory-leak-less way to
achieve the same thing that as the code above?
get the target object from the event....
Can you provide an example?
Bye.
Jasen
这篇关于如何在循环中将参数正确传递给参数化事件处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
