如何让addEventListener识别JS延迟创建的按钮元素？

我通过JavaScript向HTML页面的#btn-adder容器中添加5个按钮，设置延迟1秒生成。但代码执行到addEventListener行时，按钮还没创建，导致报错。请问怎么让addEventListener识别这些动态创建的元素？

原代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="btn-adder"></div>
    <script src="./script.js"></script>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 20px;
}
body{
    background: rgb(61, 61, 61);
}
#btn-adder{
    margin-top: 40px;
    text-align: center;
}
#btn-adder button{
    padding: 5px;
    margin: 5px;
}

JavaScript

const btnAdder = document.getElementById("btn-adder");
for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        btnAdder.innerHTML += `<button id="btn${i}">Button ${i}</button>`;
    }, 1000);
}
for (let i = 0; i < 5; i++) {
    document.getElementById(`btn${i}`).addEventListener("click", function () {
        console.log(`Button ${i} clicked`);
    });
}

解决方案 #

方案1：事件委托（推荐） #

利用DOM的事件冒泡机制，将事件绑定到已经存在的父容器#btn-adder上，通过判断触发事件的目标元素来处理点击逻辑。这种方式无需关心子元素何时创建，只要子元素匹配选择器就能触发事件，且只需要绑定一次，性能更优。

修改后的JavaScript代码：

const btnAdder = document.getElementById("btn-adder");

// 延迟创建按钮
for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        btnAdder.innerHTML += `<button id="btn${i}">Button ${i}</button>`;
    }, 1000);
}

// 给父容器绑定事件委托
btnAdder.addEventListener("click", function (e) {
    // 确认点击的是按钮元素
    if (e.target.tagName === 'BUTTON') {
        const btnIndex = e.target.id.replace('btn', '');
        console.log(`Button ${btnIndex} clicked`);
    }
});

方案2：创建元素时直接绑定事件 #

在动态创建每个按钮的同时，立即为其添加事件监听器。这种方式逻辑直观，确保元素创建完成后马上绑定事件，不会出现找不到元素的问题。

修改后的JavaScript代码：

const btnAdder = document.getElementById("btn-adder");

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        // 创建按钮DOM元素
        const btn = document.createElement('button');
        btn.id = `btn${i}`;
        btn.textContent = `Button ${i}`;
        
        // 直接绑定点击事件
        btn.addEventListener('click', function() {
            console.log(`Button ${i} clicked`);
        });
        
        // 将按钮添加到容器中
        btnAdder.appendChild(btn);
    }, 1000);
}

内容的提问来源于stack exchange，提问作者Ali_Sdg90