javascript - 以下 JavaScript 代码中的解释

Question

如果有人能向我解释以下代码的作用，我将非常感激。作为 JavaScript 新手，我对它的作用只有一个粗略的了解。这将是一个很大的帮助。如果问题幼稚，还请原谅。

var init = function() {
    var box = document.querySelector('#theArt').children[0],
        showPanelButtons = document.querySelectorAll('#show-buttons input'),
        panelClassName = 'show-front',

        onButtonClick = function(event) {
            box.removeClassName(panelClassName);
            panelClassName = event.target.className;
            box.addClassName(panelClassName);
        };

    for (var i = 0, len = showPanelButtons.length; i < len; i++) {
        showPanelButtons[i].addEventListener('click', onButtonClick, false);
    }
};

window.addEventListener('DOMContentLoaded', init, false);

这是生效的html代码

 <div id="theArt">
<div id="cube" class="show-front">
  <figure class="front"><img src="../_images/feature1.jpg" width="270px" height="270px"></figure>
  <figure class="back"><img src="../_images/feature2.jpg" width="270px" height="270px"></figure>
  <figure class="right"><img src="../_images/feature3.jpg" width="270px" height="270px"></figure>
  <figure class="left"><img src="../_images/feature4.jpg" width="270px" height="270px"></figure>
  <figure class="top"><img src="../_images/painting01.png" width="270px" height="270px"></figure>
  <figure class="bottom"><img src="../_images/painting02.png" width="270px" height="270px"></figure>
</div>

<div id="options">
<p id="show-buttons">
  <input type="image" src="../_images/feature1.jpg" width="90" height="90" class="show-front"></input>
  <input type="image" src="../_images/feature2.jpg" width="90" height="90" class="show-back"></input>
  <input type="image" src="../_images/feature3.jpg" width="90" height="90" class="show-right"></input>
  <input type="image" src="../_images/feature4.jpg" width="90" height="90" class="show-left"></input>
  <input type="image" src="../_images/painting01.png" width="90" height="90" class="show-top"></input>
  <input type="image" src="../_images/painting02.png" width="90" height="90" class="show-bottom"></input>
</p>

Answer 1

window.addEventListener('DOMContentLoaded', init, false);

上面的行尝试在浏览器中加载 DOM 内容时向页面添加一个事件，并且 init 函数将被调用。 Init 是具有函数定义的变量。

在函数定义中，变量box试图获取ID为“theArt”的元素。 onButtonClick 是具有另一个函数定义的变量。

showPanelButtons 是一个变量，它将包含 id 为“show-buttons”、类型为“input”的所有元素列表。 For 循环尝试为 showPanelButtons 列表中的每个元素添加单击事件。

希望有帮助..