事件侦听器在没有事件的情况下执行并循环通过 HTML 集合答案

【问题标题】：Event listeners executing without event and looping through HTML collection事件侦听器在没有事件的情况下执行并循环通过 HTML 集合
【发布时间】：2015-06-08 05:06:06
【问题描述】：

我正在尝试编写一个循环来初始化 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() 在页面加载时自动运行 3 次。

谁能解释为什么会这样？我唯一能想到的是“点击”由于某种原因被评估为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>

【问题讨论】：

你知道函数名后面的() 是做什么的吗？ testfunc没有返回函数，为什么在设置事件监听的时候调用呢？
我只是使用testfunc()进行调试。
请出示您拥有的真实代码。请注意，document.write 无论如何都会破坏代码，如果它是在页面被解析之后执行的。
这是我拥有的真实代码。
那么请重新阅读我的第一条评论。

标签： javascript html for-loop addeventlistener

【解决方案1】：

改变这个：

JS_elements.item(y).addEventListener("click",testfunc());

到这里：

JS_elements.item(y).addEventListener("click",testfunc);

() 使函数立即执行并将返回结果传递给addEventListener()。那不是你想要的。相反，您想传递一个函数引用，它应该只是函数名称testfunc，后面没有()。

如果您想将参数传递给testfunc，并且它们对于所有事件处理程序都是相同的参数，那么您可以创建一个中间匿名函数：

JS_elements.item(y).addEventListener("click",function() {
    testfunc("whatever");
});

【讨论】：

现在我的下一个难题是：如何调用一个接受参数的函数？
@BrandonHastings - 您必须准确地向我们展示您要传递给它的内容，以及您是否每次都尝试将相同的东西传递给每个事件处理程序。根据具体情况，有多种方法可以解决该问题。
@BrandonHastings - 我在回答中添加了testfunc 上的一个参数示例。

【解决方案2】：

只需这样做： JS_elements.item(y).addEventListener("click",testfunc);

【讨论】：