Question

我正在尝试编写一个循环来初始化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>

Answer 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");
});

Answer 2

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

事件侦听器在没有事件的情况下执行并循环遍历HTML集合

2 个答案: