通过addEventListener点击触发的For循环（JS）

Question

我希望您能够通过单击来触发“for循环”，使用“addEventListener”函数。我看到了很多问题，问如何在for循环中嵌入addEventListener函数，但找不到相反的情况，即在addEventListener函数中嵌入for循环。

这是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);

我真的找不到为什么这行不通。 非常感谢你的天才。

p.s; 如果这不能工作，那么我如何将多个事件链接到一个“addEventListener”短语？

- yubin

---

条件 for(var i=0; i < objs.length ; i++){ 是不正确的。您可以使用 Object.keys.length 获取 Object 的长度。 - random

Answer 1

你需要遍历你的对象的属性。

    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 key of Object.keys(objs)) {
        objs[key]();
      }
    }

    myDiv.addEventListener("click", loop);

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

- BeHappy

Answer 2

你的代码有两个问题： 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>

- Sajeeb Ahamed