当父元素的内部HTML被mofied时，Javascript取消事件

我在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>"

const content=document.body
常量p=document.createElement（'p'）
p、 innerHTML=“我只是一个文本元素。”
p、 addEventListener（“单击”），函数（事件）{
console.log（“事件工作…”）
})
content.appendChild（p）
content.innerHTML+=“”

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

我知道这样修改内部HTML不是一个好的做法，但是，有人能解释为什么删除这些事件吗

---

谢谢大家!

您创建的

p

和您通过

innerHTML

手动编写的

p

不是一个整体，事实上！将听众添加到

内容

，然后通过

事件.target到达
p
。最近的（'p'）

大家好，谢谢你们的回答！我知道两个“p”不一样，我试着把第一个“p”事件称为“p”。我可能只有一个字母或其他每一个标签的内容内部的HTML，我会修复我的文章，使更多的意义。另外，我并没有试图解决一个问题，我想了解为什么修改父元素的内部HTML会删除事件..看起来像是这个的副本，谢谢你，我自己找不到它，我应该删除我的帖子吗？