Javascript 单击按钮调用addEventListener时，整个JS代码将执行

单击adminBtn后，catview和listview将按照addEventListener方法中的说明进行渲染。但是在这之后，整个js代码再次执行，model、listview、catview、adminform、modelsetter再次设置，adminform.init也被调用。我不知道为什么会发生这种情况。下面是我的app.js文件。请帮忙

var adminBtn = document.getElementById('admin-form');

var model = {
    currentCat : null,
    cats : [{name: "Ait",
   imgsrc: "image.jpg",
   count: 0},
  {name: "Bop",
   imgsrc: "image1.jpg",
   count: 0},
  {name: "Cal",
   imgsrc: "image2.jpg",
   count: 0},
  {name: "Don",
   imgsrc: "image3.jpg",
   count: 0},
  {name: "Ema",
   imgsrc: "image4.jpg",
   count: 0}]
};

  var listview = {
        init : function(){
              this.nav = document.getElementById('list');
              this.render();
        },
        render : function(){
              while(this.nav.firstChild){
                    this.nav.removeChild(this.nav.firstChild);
              }
              for(var i = 0 ; i < model.cats.length ; i++){
                    var catElement = document.createElement('li');
                    catElement.appendChild(document.createTextNode(model.cats[i].name));
                    this.nav.appendChild(catElement);
                    catElement.addEventListener('click', (function(cat) {
                          return function() {
                                modelsetter.setCurrentCat(cat);
                                catview.render();
                          };
                          })(model.cats[i]));
              }
        },
  };

  var catview = {
        init : function(){
              this.catName = document.getElementById('cat-name');
              this.catCount = document.getElementById('cat-clicks');
              this.catImage = document.getElementById('cat-image');
              this.catImage.addEventListener('click', function(){
                    modelsetter.incrementCount();
              });
              this.render();
        },
        render : function(){
              var currentCat = modelsetter.getCurrentCat();
              this.catImage.setAttribute('src', currentCat.imgsrc);
              this.catCount.innerHTML = currentCat.count;
              this.catName.innerHTML = currentCat.name;
        }
  };

  var adminform = {
        init : function(){
              adminBtn.addEventListener('submit', function(){
                    this.catName = document.getElementById('new-cat-name').value;
                    this.catCount = document.getElementById('new-cat-count').value;
                    this.catImage = document.getElementById('new-cat-image').value;
                    var currentCat = modelsetter.getCurrentCat();
                    modelsetter.updateCat(currentCaamot);      
                    listview.render();
                    catview.render();
              });
        }
  };

  var modelsetter = {
        init : function(){
              model.currentCat = this.getCurrentCat() || model.cats[0];
              listview.init();
              catview.init();
        },
        getCurrentCat : function(){
              return model.currentCat;
        },
        setCurrentCat : function(cat){
              model.currentCat = cat;
        },
        incrementCount : function(){
              model.currentCat.count++;
              catview.render();
        },
        updateCat : function(cat){
              this.catName = adminBtn.catName;
              this.catCount = adminBtn.catCount;
              this.catImage = adminBtn.catImage;
              for(var i = 0 ; i < model.cats.length ; i++){
                    if(cat.name === model.cats[i].name){
                          model.cats[i].name = this.catName;
                          model.cats[i].imgsrc = this.catImage;
                          model.cats[i].count = this.catCount;
                    }
              }
        }
  };

  modelsetter.init();
  adminform.init();

---

正如Jaromanda在评论中提到的，您想要更改

...
adminBtn.addEventListener('submit', function(){
    this.catName = document.getElementById('new-cat-name').value;
...

到

---

e.preventDefault应该阻止提交事件实际提交表单。

表单提交会导致新页面被删除。。。请尝试adminBtn.addEventListener'submit'，Function{e.preventDefault；…您的其余代码…感谢Garrett和Jaromanda提供的见解：。在您的帮助下可以使用它。

...
adminBtn.addEventListener('submit', function(e){
    e.preventDefault();
    this.catName = document.getElementById('new-cat-name').value;
...