Javascript 单击事件气泡上升到父级后，“输入”按钮消失

因此，我正在学习JS并了解事件是如何工作的。我从高层次上理解，事件通过DOM节点冒泡出现。现在我有一个bookDiv，它只在其子按钮注册单击时才执行更新的textContent。我添加了一些功能，只有当

event.target.tagName==“INPUT”

时文本内容才会更新

我的问题是，在这个父节点（bookDiv）处理单击之后，bookDiv的子节点（它只是一个

和按钮）都会消失。我必须重新添加它们，但这是骇客，我不明白为什么会发生这种情况。寻找解释

注意：在GeneratoreAdstatusButtonBook（book）中，我将book（一个对象）传递给需要handleEvent的addEventListener。我没有在代码中包含该对象

谢谢你的帮助

函数generateNewBookDiv（书）{
const bookDiv=document.createElement（“div”）；
bookDiv.classList.add（“书籍项目”）；
bookDiv.textContent=`${book.title}\r\n由${book.author}\r\n页数：${book.numPages}\r\n阅读？${book.isRead}；
//在我们的“读取状态”按钮的最后一个文本内容之后快速获得换行符的方法
const lineBreak=document.createElement（“br”）；
bookDiv.appendChild（换行符）；
bookDiv.appendChild（generatereadstatusbuttonfook（book））；
bookDiv.addEventListener（“单击”，（事件）=>{
//log（“book div激活其单击事件”）；
如果（event.target.tagName==“输入”）{
//log（“读取按钮被识别并冒泡”）；
event.currentTarget.textContent=`${book.title}\r\n由${book.author}\r\n页数：${book.numPages}\r\n阅读？${book.isRead}`；
const lineBreak=document.createElement（“br”）；
bookDiv.appendChild（lineBreak）；//不确定单击后
和元素消失的原因
bookDiv.appendChild（generatereadstatusbuttonfook（book））；
}
});
container.appendChild（bookDiv）；
}
//为每本书添加阅读状态按钮
函数生成器AdStatusButtonBook（书本）{
const readStatus=document.createElement（“输入”）；
setAttribute（“类型”、“按钮”）；
readStatus.classList.add（“读取状态”）；
addEventListener（“单击”，book）；//通过传入book对象来切换读取状态，book对象将自己进行切换
返回读取状态；
}

分配给DIV的

TextContent

将用该文本替换DIV中的所有内容。这包括

元素。不能仅替换文本。请将文本放在一个span中，然后分配span的

textContent

。分配给DIV的

textContent

，将用该文本替换DIV中的所有内容。这包括

元素。不能只替换文本。请将文本放入一个span，然后指定span的

textContent

。