我正在尝试编写一个循环来初始化 JavaScript 中的事件处理程序。
我认为我做错了什么,因为我的调试功能在没有事件(点击)发生的情况下被激活。
我想做的是这样的:
var JS_elements = document.getElementsByClassName("JS")
for (y = 0; y < JS_elements.length; y++){
document.write(JS_elements.item(y).innerHTML);
JS_elements.item(y).addEventListener("click",testfunc());
}
function testfunc() {
alert("TestFunc");
}
并在我单击 class="JS" 的元素时运行 testfunc() 。
线路document.write(JS_elements.item(y).innerHTML);
行正确执行,所以我知道我正在获取正确的对象。遗憾的是,注释行导致此中断:testfunc() 在页面加载时自动运行三次。
谁能解释为什么会发生这种情况?我唯一能想到的是“点击”被评估为true
因为某些原因。
HTML:
<header>
<hr>
<p>- Header Background Color Controller -</p>
<table>
<tr>
<td>Javascript Controller:</td>
<td class="JS">Red
<input type="hidden" value='false'>
</td>
<td class="JS">Green
<input type="hidden" value='false'>
</td>
<td class="JS">Blue
<input type="hidden" value='false'>
</td>
</tr>
<tr>
<td>jQuery Controller:</td>
<td class="jQ" value=false>Red</td>
<td class="jQ" value=false>Green</td>
<td class="jQ" value=false>Blue</td>
<tr>
</table>
<hr>
</header>
改变这个:
JS_elements.item(y).addEventListener("click",testfunc());
to this:
JS_elements.item(y).addEventListener("click",testfunc);
The ()
使函数立即执行,并将返回结果传递给addEventListener()
。那不是你想要的。相反,您想要传递一个函数引用,该引用应该只是函数的名称testfunc
没有()
在它之后。
如果你想传递参数testfunc
并且它们对于所有事件处理程序都是相同的参数,那么您可以创建一个中间匿名函数:
JS_elements.item(y).addEventListener("click",function() {
testfunc("whatever");
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)