JavaScript 将事件附加到动态呈现的元素

Question

我有 2 个文件 index.html 和 all.js。

all.js

(function(){
    if (document.getElementById('btn1')){
        document.getElementById("btn1").addEventListener("click", displayMessage);
    }

    function displayMessage(){
        alert("Hi!");
    }
})()

index.html

示例 1: - 工作示例

<button id="btn1">Hit me !</button>
<script type="text/javascript" src="all.js"></script>

示例 2: - 无效示例

<button id="btn2" onclick="show()">Show</button>
<script type="text/javascript">
    function show(){
        var btn = document.createElement("BUTTON");
            btn.setAttribute("id", "btn1");
            btn.innerHTML = "Hit me !";
        document.getElementById("btn2");
        document.body.insertBefore(btn, btn2);
    }
</script>
<script type="text/javascript" src="all.js"></script>

描述:在第一个示例中，btn1 被立即渲染，事件被附加到它上面。在第二个示例中，btn1 仅在您单击 btn2 时呈现，之后如果您单击 btn1 则什么也不会发生。

如何在不更改 all.js 的情况下将事件附加到 btn1？

这是完整的代码 repository

^{注意:不要问我为什么要尝试做这样的事情，不要问我为什么不允许更改all.js 因为这个例子是一个简化的例子，在我的例子中，all.js 文件包含数千行，在许多元素上有很多事件。 JavaScript 解决方案意味着我不能使用其他外部库。}

更新:答案接受

我得到了很多不同的答案。你们中有些人更努力地解决这个问题，有些人工作得更少，但好在我决定了。我得到了一些可行的解决方案，但其中一些只适用于这种特殊情况，没有考虑到我真正的 all.js 文件有 4029 行代码，一些解决方案建议使用我同意的事件委托(delegate)，但不幸的是我不能改变我的全部.js 文件。最后我选择了最好的解决方案，我也考虑了谁先回答，我也考虑了谁为此做了很多工作，等等。无论如何，我要实现的解决方案是两者之间的合并2 个解决方案，Aruna 和 Vlacav 的解决方案(加上我自己的一些更改)，这里是:

function show(){
    var btn = document.createElement("BUTTON");
        btn.setAttribute("id", "btn1");
        btn.innerHTML = "Hit me !";
    document.getElementById("btn2");
    document.body.insertBefore(btn, btn2);
    resetJs('all.js');
}

function resetJs(path) {
    var scripts = document.getElementsByTagName('script')
        , newScript = document.createElement("script");

    newScript.src = path + "?timestamp=" + Math.round(new Date().getTime()/1000);   

    for (var i = 0; i < scripts.length; ++i) {      
        var srcUrl = scripts[i].getAttribute('src');
        if (srcUrl && srcUrl.indexOf(path) > -1) {                 
           scripts[i].parentNode.replaceChild(newScript, scripts[i]);
        }           
    }
}

不幸的是，我不能分割声誉，我只能把它交给他们中的一个，我想把它交给 Vlacav，因为他是第一个发布我正在寻找的解决方案的人，他也这样做了当我要求他这样做时，对它进行了一些更改。我还评价了 Aruna 的回答，因为他应得的。

我已将解决方案发布到单独的分支 here并且我还在这个 repo 上使用我收到的其他解决方案创建了其他几个分支，因为它们可能在其他情况下有用。

Answer 1

给元素 btn 添加一个 onclick 属性。

function displayMessage() {
  alert("Hi!");
}

function show() {
  var btn = document.createElement("BUTTON");
  btn.setAttribute("id", "btn1");
  btn.innerHTML = "Hit me !";
  btn.onclick = displayMessage;
  document.getElementById("btn2");
  document.body.insertBefore(btn, btn2);
}

<button id="btn2" onclick="show()">Show</button>