javascript - 当父元素的内部 HTML 被修改时，Javascript 取消事件

Question

我在 Javascript 上遇到了一些奇怪的事件，我尝试向元素添加事件，并修改父元素内部 HTML 删除了事件，这是一个示例：

const content = document.body
const p = document.createElement('p')
p.innerHTML = "I am just a text element."

p.addEventListener("click", function(event){
    console.log("The event works..")
})

content.appendChild(p)
content.innerHTML += "<div> </div>"

现在，单击“p”元素应该会触发该事件，但最后一行“content.innerHTML...”会阻止它。它以某种方式删除了该事件。

我知道像这样修改内部 HTML 不是一个好习惯，但是，有人可以解释为什么删除事件吗？

谢谢 ！

标签： javascripteventsinnerhtml