这段 javascript代码的运行机制
问题：为什么onclick事件能正确获取到我点的是数组哪个元素，还有下标。（tab，tabPos）
for循环至setTabHandler(tab, i)，执行函数 循环调用3次该函数，它不是直接循环完了吗？
这段javascript代码应该不是从我点击开始onclick事件才执行的吧？
</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>
慕娘93253243回答
-
慕丝7291255
为什么onclick事件能正确获取到我点的是数组哪个元素，还有下标。（tab，tabPos）因为一开始就已经通过循环把 元素 和 下标 传递给 setHandler 了。for循环至setTabHandler(tab, i)，执行函数 循环调用3次该函数，它不是直接循环完了吗？每循环一次就给对应下标的元素注册监听函数，然后就结束了这没错。这段javascript代码应该不是从我点击开始onclick事件才执行的吧？只有 tab.onclick = function () { ... } 这一段是你点击后才执行的，其他的都是页面一加载完就执行了。 -
GCT1015
为什么onclick事件能正确获取到我点的是数组哪个元素，还有下标。（tab，tabPos）这牵涉到执行顺序，因变数在一开始就给值，所以下方已经注册 tabs, panelsfor循环至setTabHandler(tab, i)，执行函数 循环调用3次该函数，它不是直接循环完了吗？确实循环完了，但因 setTabHandler 中注册了 onclick 事件，所以后续 tab 被点击时会触发已被注册的 onclick 事件这段javascript代码应该不是从我点击开始onclick事件才执行的吧？setTabHandler 在程式第一次执行时就被呼叫，后续点击时触发的是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'); }这段程式码
随时随地看视频慕课网APP
相关分类
JavaScript