javascript - addEventListener点击触发的for循环(JS)

Question

我正在尝试通过单击使用“addEventListener”函数来触发“for 循环”。我看到很多问题询问如何将 addEventListener 嵌入到 for 循环中，但找不到相反的情况，for 循环嵌入到 addEventListener 中。

这是html-----html-----

<div id="myDiv">
  <p id="myP">HO HO HO</p>
</div>

-----JavaScript-----

    var myDiv = document.getElementById("myDiv");

    var objs = {Aman : function(){myDiv.style.background="yellow"}, 
                Bman : function(){myDiv.style.margin = "30px"},
                Cman : function(){myDiv.style.border ="blue"}};

    function loop(){
      for(var i=0; i < objs.length ; i++){
          return objs[Object.keys(objs)[i]] }
                   };

    myDiv.addEventListener("click", loop);

我真的找不到为什么这不起作用。真的很感谢你的天才。

附注； 如果这行不通，那么如何将多个事件链接到一个“addEventListener”短语？

Answer 1

您的代码有两个问题。1. 在 for 循环中使用 objs.length 但没有对象的长度。2.进入你定义函数的objs。但是您不调用函数。

你可以看看这个。它可能对您有所帮助。

var myDiv = document.getElementById("myDiv");

var objs = {
  Aman: function() {
    myDiv.style.background = "yellow";
  },
  Bman: function() {
    myDiv.style.margin = "30px";
  },
  Cman: function() {
    myDiv.style.border = "blue";
  }
};

function loop() {
  // loop through Object.keys(objs).length not objs.length
  for (let i = 0; i < Object.keys(objs).length; i++) {
    objs[Object.keys(objs)[i]](); // You have to call the function
  }
}

myDiv.addEventListener("click", loop);

<div id="myDiv">
  <p id="myP">HO HO HO</p>
</div>