事件侦听器在没有事件的情况下执行，并通过HTML集合循环 [英] Event listeners executing without event and looping through HTML collection

问题描述

我想写一个循环来初始化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。

document.write（JS_elements.item（y）.innerHTML）; line执行正确，所以我知道我正在接近正确的对象。令人遗憾的是，评论行导致了这个问题：testfunc（）在页面加载时自动运行三次。

任何人都可以解释为什么会发生这种情况吗？我唯一能想到的是，出于某种原因，click被评估为 true 。

HTML：

 < header> 
< hr> 
< p>  - 标题背景颜色控制器 - < / p> 
< table> 
< tr> 
< td> Javascript控制器：< / td> 
< td class =JS> Red 
< input type =hiddenvalue ='false'> 
< / td> 
< td class =JS>绿色
< input type =hiddenvalue ='false'> 
< / td> 
< td class =JS>蓝色
< input type =hiddenvalue ='false'> 
< / td> 
< / tr> 
< tr> 
< td> jQuery控制器：< / td> 
< td class =jQvalue = false>红色< / td> 
< td class =jQvalue = false>绿色< / td> 
< td class =jQvalue = false>蓝色< / td> 
< tr> 
< / table> 
< hr> 
< / header> 
  

解决方案

更改：

  JS_elements.item（y）.addEventListener（click，testfunc（））; b 
 
 
 
 
 
  JS_elements.item（Y） - 阅读进度 - （ 点击，testfunc）; 
  

（）使函数成为立即执行并将返回结果传递给 addEventListener（）。这不是你想要的。相反，你想传递一个函数引用，该引用应该只是函数 testfunc 的名称而不是（）它。



---

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

  JS_elements.item（y） .addEventListener（click，function（）{
 testfunc（whatever）; 
}）; 
  

I am trying to write a loop to initialize event handlers in JavaScript.

I think I am doing something wrong, because my debugging function is being activated without the event (the click) occurring.

What I want to do is this:

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

and have testfunc() run when I click on an element with a class="JS".

The line document.write(JS_elements.item(y).innerHTML); line executes correctly, so I know I am getting to the correct objects. Sadly, the commented line is causing this to break: testfunc() runs three times automatically on the page load.

Can anyone explain why this is happening? The only thing I can think is that "click" is being evaluated as true for some reason.

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>

解决方案

Change this:

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

to this:

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

The () causes the function to be executed immediately and the return result is passed to addEventListener(). That is not what you want. Instead, you want to pass a function reference which should be just the name of the function testfunc without the () after it.

---

If you want to pass arguments to testfunc and they are the same arguments for all the event handlers, then you can create an intermediary anonymous function:

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

这篇关于事件侦听器在没有事件的情况下执行，并通过HTML集合循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！