在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 這段 javascript代碼的運(yùn)行機(jī)制

這段 javascript代碼的運(yùn)行機(jī)制

問(wèn)題：為什么onclick事件能正確獲取到我點(diǎn)的是數(shù)組哪個(gè)元素，還有下標(biāo)。（tab，tabPos）
for循環(huán)至setTabHandler(tab, i)，執(zhí)行函數(shù) 循環(huán)調(diào)用3次該函數(shù)，它不是直接循環(huán)完了嗎？
這段javascript代碼應(yīng)該不是從我點(diǎn)擊開(kāi)始o(jì)nclick事件才執(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事件能正確獲取到我點(diǎn)的是數(shù)組哪個(gè)元素，還有下標(biāo)。（tab，tabPos）

因?yàn)橐婚_(kāi)始就已經(jīng)通過(guò)循環(huán)把 元素 和 下標(biāo) 傳遞給 setHandler 了。

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

每循環(huán)一次就給對(duì)應(yīng)下標(biāo)的元素注冊(cè)監(jiān)聽(tīng)函數(shù)，然后就結(jié)束了這沒(méi)錯(cuò)。

這段javascript代碼應(yīng)該不是從我點(diǎn)擊開(kāi)始o(jì)nclick事件才執(zhí)行的吧？

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

2018年2月9日 06:28
編輯回答
抱緊我
為什么onclick事件能正確獲取到我點(diǎn)的是數(shù)組哪個(gè)元素，還有下標(biāo)。（tab，tabPos）

這牽涉到執(zhí)行順序，因變數(shù)在一開(kāi)始就給值，所以下方已經(jīng)注冊(cè) tabs, panels

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

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

這段javascript代碼應(yīng)該不是從我點(diǎn)擊開(kāi)始o(jì)nclick事件才執(zhí)行的吧？

setTabHandler 在程式第一次執(zhí)行時(shí)就被呼叫，后續(xù)點(diǎn)擊時(shí)觸發(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
編輯回答
玄鳥(niǎo)

在瀏覽器中，tags,panels已經(jīng)是全局變量，tab.onclick=是對(duì)dom元素click事件屬性賦值，這是前提。
每個(gè)tab都有一個(gè)click事件，而事件在初始化的時(shí)候已經(jīng)通過(guò)tabPos獲取到了下標(biāo)，可以理解為：

tab[0] click對(duì)應(yīng)的下標(biāo)是 0
tab[1] click對(duì)應(yīng)的下標(biāo)是 1
...

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

2018年1月10日 16:47