如何检测动态创建的HTML元素点击事件并获取其ID？

当然可以做到，针对你这种动态生成带唯一ID元素的场景，有两种简单高效的方法来捕获点击事件并获取元素ID：

方法一：创建元素时直接绑定点击事件 #

既然你在生成图标的时候已经持有unique_id变量，最直接的方式就是在创建元素后立刻给它绑定点击事件，这样可以直接拿到ID，甚至不需要额外从DOM中获取：

let unique_id = uuidv4()
let invisibilityIcon = document.createElement("IMG")
invisibilityIcon.setAttribute("src", "icons/eye-off.svg")
invisibilityIcon.setAttribute("height", "24")
invisibilityIcon.setAttribute("width", "24")
invisibilityIcon.setAttribute("style", "float: right; margin-left: 20px; margin-top: 12px; position: relative; margin-right: 20px")
invisibilityIcon.setAttribute("id", unique_id )

// 直接为当前图标绑定点击事件
invisibilityIcon.addEventListener("click", function() {
    console.log("眼睛图标被点击，ID为：", unique_id);
    // 在这里编写你需要的后续处理逻辑，比如用这个ID操作对应的元素
});

// 最后别忘了把图标添加到DOM的目标位置
document.querySelector(".your-target-container").appendChild(invisibilityIcon);

这种方法的优势是逻辑直观，每个图标事件独立，而且能直接复用创建时的unique_id变量，无需额外DOM查询。

方法二：使用事件委托统一处理 #

如果你的网站会生成大量这类动态图标，重复绑定事件可能显得繁琐，这时可以用事件委托——给所有图标的父容器绑定一个事件，通过事件冒泡来捕获子元素的点击：

假设所有动态生成的眼睛图标都会被添加到一个固定的父容器（比如ID为icon-container的元素），你可以这样写：

// 获取父容器（确保这个容器在DOM中存在）
const iconParentContainer = document.getElementById("icon-container");

// 给父容器绑定点击事件
iconParentContainer.addEventListener("click", function(event) {
    // 验证点击的元素确实是我们的眼睛图标
    if (event.target.tagName === "IMG" && event.target.src.includes("eye-off.svg")) {
        const clickedIconId = event.target.id;
        console.log("眼睛图标被点击，ID为：", clickedIconId);
        // 在这里执行后续处理逻辑
    }
});

事件委托的好处是只需要绑定一次事件，不管后续生成多少图标都能自动响应点击，性能更优，也更易于维护。

你可以根据自己的业务场景选择合适的方法：如果每个图标需要独立的处理逻辑，方法一更合适；如果是批量动态元素，方法二更高效。

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