Javascript 同一事件的addEventListener

所以我有几个div标签，我现在已经隐藏了，我想通过点击enter键一个接一个地显示它们

我希望发生的事情：我点击回车键，第一个div标签显示出来，然后我再次点击回车键，看到第二个div标签

发生了什么：我按了一下enter键，两个div标记都显示出来了

在本例中，我要展示的第一个div标记是“intro”，第二个是“body”。我在jsbin上运行这个网站，如果有帮助的话，我正在使用chrome

这是我的JavaScript：

//***********************************************************

//  BODY MODULE

var bodyController = (function(){
  var enterBool;

  var reveal = function(){
    if(enterBool){
      document.getElementById("evidence").style.display = "block";
      enterBool = false;
    }
  };

  var enterListen = function(){
    document.addEventListener("keydown", function(event){
      if(event.keyCode === 13){
        document.addEventListener("keyup", function(event){
          if(event.keyCode === 13){
            enterBool = true;
            reveal();
          }
        });
      }
    });
  };

  return{
    enterBoolBody: enterBool,
    enterListenBody: function(){
      enterListen();
    }
  }
})();

//***********************************************************

//  INTRO MODULE

var introController = (function(){
  var enterBool;

  var reveal = function(){
    if(enterBool){
      document.getElementById("body").style.display = "block";
      enterBool = false;
    }
  };

  var enterListen = function(){
    document.addEventListener("keydown", function(event){
      if(event.keyCode === 13){
        document.addEventListener("keyup", function(event){
          if(event.keyCode === 13){
            enterBool = true;
            reveal();
          }
        });
      }
    });
  };

  return{
    enterBoolIntro: enterBool,
    enterListenIntro: function(){
      enterListen();
    }
  }
})();

 //***********************************************************

 //  CONTROL MODULE

 var controller = (function(introCtrl, bodyCtrl, evidenceCtrl, infoCtrl, 
 conclusionCtrl){  
  var eventListeners = function(){
     introCtrl.enterListenIntro();
     bodyCtrl.enterListenBody();
  };

  return{
    init: function(){
      eventListeners();
    }
  }
 })(introController, bodyController, evidenceController, 
    infoController, conclusionController);

 //***********************************************************

 controller.init();

---

我想你可能设计得有点过头了。您只需要一个事件侦听器来检查enter。然后检查是否显示了第一个div，如果没有显示它。如果显示第一个div，请检查是否显示第二个div并显示它

请注意，如果类列表对您很重要，则不支持IE9。

（功能（窗口、文档、未定义）
{
文件。添加的监听器（'keyup'，showDivs，false）；
})（窗口，窗口，文件）；
函数showDivs（事件）
{
event=event | | window.event；
var divsToShow=document.getElementsByClassName（“Display Div”）；
对于（var i=0；i

。隐藏{
显示：无；
}
.街区{
显示：块；
}

这个
现在
作品
具有
任何
Div
具有
等级
Display Div

我想你可能有点过度设计了。您只需要一个事件侦听器来检查enter。然后检查是否显示了第一个div，如果没有显示它。如果显示第一个div，请检查是否显示第二个div并显示它

请注意，如果类列表对您很重要，则不支持IE9。

（功能（窗口、文档、未定义）
{
文件。添加的监听器（'keyup'，showDivs，false）；
})（窗口，窗口，文件）；
函数showDivs（事件）
{
event=event | | window.event；
var divsToShow=document.getElementsByClassName（“Display Div”）；
对于（var i=0；i

。隐藏{
显示：无；
}
.街区{
显示：块；
}

这个
现在
作品
具有
任何
Div
具有
等级
Display Div

您可以将Div的id放入一个数组中，也可以为要逐个显示的所有Div分配一个公共类。假设是第一个，这段代码只是从数组中获取要显示的下一个div的id，并递增计数器。您可以向数组中添加更多div，这样就可以了

var divs = ["evidence", "body"];
var counter = 0;
document.addEventListener("keyup", function(event){
  if(counter < divs.length && event.keyCode == 13){
    document.getElementById(divs[counter]).style.display = 'block';
    counter++;
  }
});

var divs=[“证据”、“主体”]；
var计数器=0；
文件。添加事件列表器（“键控”，功能（事件）{
if（计数器

您可以将div的id放入一个数组中，也可以为要逐个显示的所有div分配一个公共类。假设是第一个，这段代码只是从数组中获取要显示的下一个div的id，并递增计数器。您可以向数组中添加更多div，这样就可以了

var divs = ["evidence", "body"];
var counter = 0;
document.addEventListener("keyup", function(event){
  if(counter < divs.length && event.keyCode == 13){
    document.getElementById(divs[counter]).style.display = 'block';
    counter++;
  }
});

var divs=[“证据”、“主体”]；
var计数器=0；
文件。添加事件列表器（“键控”，功能（事件）{
if（计数器

为什么要在事件中绑定事件？您指的是：document.addEventListener（“keydown”，function（event）{if（event.keyCode==13）{document.addEventListener（“keyup”，function（event）{if（event.keyCode==13）{enterBool=true；reveal（）；}}}}）；如果是这样的话，我是这样写的，因为我认为这样可以确保在检查密钥是否会再次下降之前，密钥已经恢复。我对JS非常陌生，因此，任何帮助都将不胜感激。请确保该键已恢复：只有当该键启动时才会触发keyup事件，因此我认为您只需要添加keyup eventListener我确实有一个keyup eventListener:/为什么要在事件中绑定事件？您是指：document.addEventListener（“keydown”，function（event）{if（event.keyCode==13）{document.addEventListener（“keyup”，函数（event）{if（event.keyCode==13）{enterBool=true；reveal（）；}}}}）；如果是这样，我是这样写的，因为我认为这样可以确保在检查密钥是否会再次下降之前，密钥已经恢复。我对JS非常陌生，因此非常感谢您提供的任何帮助。确保密钥已恢复：密钥恢复事件仅在密钥恢复时触发，因此我认为您只需要添加密钥恢复事件stenerI do have a keyup eventListener:/我想我尝试了你的方法，但没有成功。我想我可能不支持classList。我也不知道如何检查。我还想用至少两个以上的div标记继续这个过程，我想你的方法可能不适合2个以上的div标记。除非你认为我真的应该这样做使用一堆if-else，或者switch语句。任何现代浏览器都应该支持classList。如果你想添加更多div，你可以使用类似James的解决方案，将它们放入数组或添加特定的类。我将使用多个div支持更新答案。我想我已经尝试了你的方法，但没有成功。我想我可能不支持类列表。我也不确定如何检查此问题。我还想用至少2个以上的div标记继续此过程，我认为您的方法可能不是2个以上div标记的最佳方法。除非您认为我真的应该使用一组if-else或switch语句。任何现代浏览器都应该支持类列表。如果您愿意的话添加更多div