鍍金池/ 問答/HTML/ 這段 javascript代碼的運行機制

這段 javascript代碼的運行機制

問題：為什么onclick事件能正確獲取到我點的是數組哪個元素，還有下標。（tab，tabPos）
for循環(huán)至setTabHandler(tab, i)，執(zhí)行函數 循環(huán)調用3次該函數，它不是直接循環(huán)完了嗎？
這段javascript代碼應該不是從我點擊開始onclick事件才執(zhí)行的吧？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabbed info box</title>
  <style>
      html {
  font-family: sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.info-box {
  border: 1px solid red;
  width: 452px;
  height: 400px;
  margin: 0 auto;
}
.info-box ul {
  padding-left: 0;
  margin-top: 0;
}
.info-box li {
  float: left;
  list-style-type: none;
  width: 150px;
}

.info-box li a {
  border: 1px solid black;
  display: block;
  text-decoration: none;
  width: 100%;
  line-height: 3;
  background-color: red;
  color: black;
  text-align: center;
}
.info-box li a:focus, .info-box li a:hover {
  background-color: #a60000;
  color: white;
}
.info-box li a.active {
  background-color: #a60000;
  color: white;
}
.info-box li a.demo {
      background-color: #030303;
  color: white; 
}

.info-box .panels {
  position:relative;
  height: 352px;
  clear: both;
}
.info-box article {
  position: absolute;
  top: 0;
  left: 0;
  height: 352px;
  padding: 10px;
  color: white;
  background-color: #a60000;
}
.info-box .active-panel {
  z-index: 1;
}
  </style>
</head>
<body>
<section class="info-box">
  <ul>
    <li><a class="active" href="#" >Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div class="panels">
    <article class="active-panel">
      <h2>The first tab</h2>

      <p >1Lorem ipsum dolor sit amet,</p>
    </article>
    <article>
      <h2>The second tab</h2>

      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
    </article>
    <article>
      <h2>The third tab</h2>

      <p>3Lorem ipsum dolor sit </p>

      <ol>
        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
        <li>Aliquam ut porttitor urna.</li>
        <li>Nulla facilisi</li>
      </ol>
    </article>
  </div>
</section>

<script>
    var tabs = document.querySelectorAll('.info-box li a');
    var panels = document.querySelectorAll('.info-box article');

for(i = 0; i < tabs.length; i++) {
  var tab = tabs[i];
  setTabHandler(tab, i);
}
function setTabHandler(tab, tabPos) {
  tab.onclick = function() {
      alert(tabPos);
    for(i = 0; i < tabs.length; i++) {
      if(tabs[i].getAttribute('class')) {
        tabs[i].removeAttribute('class');
      }
    }
    tab.setAttribute('class', 'demo');

    for(i = 0; i < panels.length; i++) {
      if(panels[i].getAttribute('class')) {
        panels[i].removeAttribute('class');
      }
    }
    panels[tabPos].setAttribute('class', 'active-panel');
  }
}
</script>
  
</body>
</html>
回答
編輯回答
傲嬌范
為什么onclick事件能正確獲取到我點的是數組哪個元素，還有下標。（tab，tabPos）

因為一開始就已經通過循環(huán)把 元素 和 下標 傳遞給 setHandler 了。

for循環(huán)至setTabHandler(tab, i)，執(zhí)行函數 循環(huán)調用3次該函數，它不是直接循環(huán)完了嗎？

每循環(huán)一次就給對應下標的元素注冊監(jiān)聽函數，然后就結束了這沒錯。

這段javascript代碼應該不是從我點擊開始onclick事件才執(zhí)行的吧？

只有 tab.onclick = function () { ... } 這一段是你點擊后才執(zhí)行的，其他的都是頁面一加載完就執(zhí)行了。

2018年2月9日 06:28
編輯回答
抱緊我
為什么onclick事件能正確獲取到我點的是數組哪個元素，還有下標。（tab，tabPos）

這牽涉到執(zhí)行順序，因變數在一開始就給值，所以下方已經注冊 tabs, panels

for循環(huán)至setTabHandler(tab, i)，執(zhí)行函數 循環(huán)調用3次該函數，它不是直接循環(huán)完了嗎？

確實循環(huán)完了，但因 setTabHandler 中注冊了 onclick 事件，所以后續(xù) tab 被點擊時會觸發(fā)已被注冊的 onclick 事件

這段javascript代碼應該不是從我點擊開始onclick事件才執(zhí)行的吧？

setTabHandler 在程式第一次執(zhí)行時就被呼叫，后續(xù)點擊時觸發(fā)的是

function() {
      alert(tabPos);
    for(i = 0; i < tabs.length; i++) {
      if(tabs[i].getAttribute('class')) {
        tabs[i].removeAttribute('class');
      }
    }
    tab.setAttribute('class', 'demo');

    for(i = 0; i < panels.length; i++) {
      if(panels[i].getAttribute('class')) {
        panels[i].removeAttribute('class');
      }
    }
    panels[tabPos].setAttribute('class', 'active-panel');
  }

這段程式碼

2017年2月4日 00:52
編輯回答
玄鳥

在瀏覽器中，tags,panels已經是全局變量，tab.onclick=是對dom元素click事件屬性賦值，這是前提。
每個tab都有一個click事件，而事件在初始化的時候已經通過tabPos獲取到了下標，可以理解為：

tab[0] click對應的下標是 0
tab[1] click對應的下標是 1
...

代碼實際上在頁面加載到該塊代碼時已經執(zhí)行了，因此頁面渲染完成后對應元素tab已經有click事件屬性（你可以用開發(fā)者工具查看）。

2018年1月10日 16:47