javascript - addEventListener 只是运行该函数，而不是保存该函数

Question

所以我试图设置一个函数来隐藏和显示页面的某些部分，而不使用任何带有 JavaScript 的外部库。我的问题似乎是 addEventListener 没有将事件监听器附加到 DOM=object 而只是运行它。

我正在使用的网站上的部分是:

    <a class="tab" href="#index" id="index">Weapons</a>
    <a class="tab" href="#armor" id="armor">Armor</a>
    <a class="tab" href="#items" id="items">Items</a>

    <div id="index_content" class="tab_content">
        This is the content to display in weapons
    </div>
    <div id="armor_content" class="tab_content">
        Welcome to armor!
    </div>
    <div id="items_content" class="tab_content">
        Items are probably the best of the  tabs.
    </div>

我的 JavaScript 是:

function clear(key){
  "use strict";
  key = String(key);


  //hides all content in items
  for (var i = 0; i < itemArray.length; i++) {
      document.getElementById(itemArray[i]+"_content").style.display = "none";
  }

  //shows current item
  document.getElementById(key).style.display = "block";
  return;
}

function tabsInit(){
  "use strict";
  for(var i = 0; i < itemArray.length; i++){
document.getElementById(itemArray[i]).addEventListener("click",clear(itemArray[i]));
  }
}

window.onload = function(){
  "use strict";
  tabArray = document.getElementsByClassName("tab");

  //add Items into item array
  for(var i = 0; i < tabArray.length; i++){
      itemArray[i] = tabArray[i].id;
  }
  tabsInit();
}

Answer 1

您假设您需要 ID 才能到达绑定(bind)元素。你不知道。指定 clear 作为事件处理程序，并在函数内使用 this，尽管我认为您将错误的项目设置为 “block”。

此外，我不确定您为什么要创建 ID 数组。您可以直接使用元素列表，并根据需要创建类似的 _content 元素列表。

这是您的代码的重写。

document.addEventListener("DOMContentLoaded", function() {
  "use strict";

  const tabArray = document.querySelectorAll(".tab");
  const contentArray = document.querySelectorAll(".tab_content");

  tabsInit();

  function tabsInit() {
    for (var i = 0; i < tabArray.length; i++) {
      tabArray[i].addEventListener("click", clear);
    }
  }

  function clear() {
    //hides all content in items
    for (var i = 0; i < contentArray.length; i++) {
      contentArray[i].style.display = "none";
    }

    //shows current item
    document.querySelector("#" + this.id + "_content").style.display = "block";
  }
});

div[id$=_content]:not(:first-of-type) {
  display: none;
}

<a class="tab" href="#index" id="index">Weapons</a>
<a class="tab" href="#armor" id="armor">Armor</a>
<a class="tab" href="#items" id="items">Items</a>

<div id="index_content" class="tab_content">
  This is the content to display in weapons
</div>
<div id="armor_content" class="tab_content">
  Welcome to armor!
</div>
<div id="items_content" class="tab_content">
  Items are probably the best of the tabs.
</div>