Javascript 如何在动态创建HTML元素时检测被单击的HTML元素

Javascript 如何在动态创建HTML元素时检测被单击的HTML元素,javascript,html,dom,Javascript,Html,Dom,我知道有几种简单的方法可以通过如下方式检测对任何HTML元素的点击: document.getElementById("submit") .addEventListener("click", function(event) { alert("Submit button is clicked!"); event.preventDefault(); }); let unique_id = uui

我知道有几种简单的方法可以通过如下方式检测对任何HTML元素的点击:

    document.getElementById("submit")
    .addEventListener("click", function(event) {
    alert("Submit button is clicked!");
    event.preventDefault();
  });
    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 )
但是,如果我让用户在一个站点上创建html元素,在这个站点上他们可以输入自定义字符串,并且这些元素的id是随机生成的,如下所示:

    document.getElementById("submit")
    .addEventListener("click", function(event) {
    alert("Submit button is clicked!");
    event.preventDefault();
  });
    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 )

这只是用户可以在我的网站上创建的众多元素中的一个,它是一个eye svg图标,每次用户创建一个新的元素时,都会生成一个唯一的ID。我想检测何时单击此图标并收集其id值以进一步使用它,这是否可能?

添加到invisibilityIcon事件侦听器

let unique_id = uuidv4()
let arrayIds = []  

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(e){
    //do what you need
    arrayIds.push(e.target.id);
    //or
    arrayIds.push(this);
})

您可以使用@Pete的委托事件处理程序,这正是我想要的,谢谢