如何为页面加载时未渲染的动态元素绑定addEventListener？

我有一个点击按钮后才会渲染的input元素（页面加载时不存在），希望用户在该元素输入内容时控制台输出"Add button clicked!"，但运行时出现以下错误：

Uncaught TypeError: can't access property "addEventListener", document.getElementById(...) is null

相关代码：

export const renderTodo = () => {
    document.querySelector('#main').innerHTML = `
<h2>Todo(CRUD) Page ${import.meta.env.VITE_TEST}</h2>
<br>
<form action="/action_page.php">
    <input type="text" placeholder="New todo.." id="new-todo">
    <br>
    <button id="add-todo">Add</button>
</form> 
`;
};

document.getElementById("new-todo").addEventListener("change", (e) => {
    console.log("Add button clicked!");
});

解决方法 #

方法1：渲染完成后再绑定事件 #

直接将事件绑定代码放到renderTodo函数内部，在动态HTML插入完成后执行。此时目标元素已经存在，不会出现null错误：

export const renderTodo = () => {
    document.querySelector('#main').innerHTML = `
<h2>Todo(CRUD) Page ${import.meta.env.VITE_TEST}</h2>
<br>
<form action="/action_page.php">
    <input type="text" placeholder="New todo.." id="new-todo">
    <br>
    <button id="add-todo">Add</button>
</form> 
`;
    // 渲染完成后立即绑定事件
    document.getElementById("new-todo").addEventListener("change", (e) => {
        console.log("Add button clicked!");
    });
};

方法2：使用事件委托（推荐频繁渲染场景） #

把事件绑定到页面加载时就存在的父元素（比如#main）上，利用事件冒泡机制处理动态元素的事件。这种方式不需要每次渲染都重复绑定事件：

// 绑定到已存在的父元素
document.querySelector('#main').addEventListener("change", (e) => {
    // 判断触发事件的是目标input
    if (e.target.id === "new-todo") {
        console.log("Add button clicked!");
    }
});

export const renderTodo = () => {
    document.querySelector('#main').innerHTML = `
<h2>Todo(CRUD) Page ${import.meta.env.VITE_TEST}</h2>
<br>
<form action="/action_page.php">
    <input type="text" placeholder="New todo.." id="new-todo">
    <br>
    <button id="add-todo">Add</button>
</form> 
`;
};

补充说明 #

如果你的实际需求是监听Add按钮的点击事件（而非input的change事件），需要调整绑定目标和事件类型，同时阻止表单默认提交行为：

// 以方法1为例，修改事件绑定部分
document.getElementById("add-todo").addEventListener("click", (e) => {
    e.preventDefault(); // 阻止表单默认提交刷新页面
    console.log("Add button clicked!");
});

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