Javascript事件处理程序-为什么这样做？

从下面的代码可以看出，我是javascript新手。我想为页面上的6个按钮创建一个事件处理程序。单击按钮后，按钮下方代码块的显示属性将从“无”更改为“块”。要做到这一点，我需要将每个按钮与html的一个单独部分相关联（在本例中，标记具有唯一ID—pt1、pt2等）

我为此挣扎了一段时间，让下面的代码正常工作。这就是问题所在！结果证明我完全错了。但是，作为一个新手，当它起作用的时候，我认为我已经掌握了一些东西。由于我花了几个小时在这上面，我需要知道下面的代码为什么起作用（这样我会觉得我学到了一些东西）。我将强调代码中我一生都无法解释其工作原理的部分

var buttons = document.getElementsByClassName("CSS");

for (var i = 0; i < buttons.length; i++) {
    // Generate strings associated with the button ids and the event handlers for each button
    var buttonID = "button" + i;
    var clickHandlerID = "clickHandler" + i;
    var buttonEH = document.getElementById(buttonID);
    // Identify the button elements by id

    // As clickHandlerID is a string, to get the browser to recognise it as a function name
    var clickHandler = window[clickHandlerID];

    buttonEH.addEventListener("click", clickHandler, false);
}

/*****************************************************************************/

// Why does this work?
// clickHandler1, clickHandler2, etc are not referenced in my event handler.
// My botched attempt to create them in the event handler (var clickHandler = window[clickHandlerID];)
// resulted in "undefined" values (from console.log(clickHandler)).
// Yet it worked?!?! (I did eventually find the correct approach, a simple 10 line solution,
// but I am troubled that I don't understand what is going on here. Any help would be greatly appreciated!!)

/*****************************************************************************/


function clickHandler1 () {
    if (pt1.style.display === "block") {
        pt1.style.display = "none";
    } else {
        pt1.style.display = "block";
    }
}

function clickHandler2 () {
    if (pt2.style.display === "block") {
        pt2.style.display = "none";
    } else {
        pt2.style.display = "block";
    }
}

var buttons=document.getElementsByClassName（“CSS”）；
对于（变量i=0；i

var buttons=document.getElementsByClassName（“CSS”）；
对于（变量i=0；i

#pt0，#pt1，#pt2，#pt3{
显示：无；
}

按钮1
按钮2
按钮3
PT1
PT2
PT3

谢谢！！你的回答很有道理。这确实引出了最后一个问题。为什么console.log（clickHandler）给了我“undefined”（当放在“var clickHandler=window[clickHandlerID]；”语句后面的循环中时）？我这样问是因为我怀疑你的答案是实际发生的事情，但“未定义”的返回让我困惑。再次感谢！！哦，天哪，可能是我在循环之后定义了clickHandler函数吗？我想这就是正在发生的事情吧？诚实的问题！不，函数定义应该被提升到开头。我正在想办法。我无法重现你的console.log问题。我将代码与log语句一起放入我的答案中，它正确地记录了函数。我怀疑你打错了。谢谢。一个打字错误花了我几个小时的时间，还造成了很多混乱。很高兴我现在明白发生了什么！！