Javascript 如何检测contenteditable div的内容是否已更改

我试图弄清楚，当客户端更改文本时，是否可能检测到内容为文本的contenteditable div。我试图设计一个简单的配置文件页面，用户可以在其中单击div，对其进行编辑，编辑完成后，该div的内容将存储为一个Javascript变量，并发送到我的API。我对webdevelopment相当陌生，如果有人告诉我如何用Javascript实现这一点，我将不胜感激

相关代码：

   <div class="bio1" contenteditable="true" name="bio" id="bio">
   Apparently, this user prefers to keep an air of mystery about them.
   <br>
   <br>
   <hr class="hrStyle">

显然，这个用户更喜欢保持一种神秘的气氛。

标记确实关闭，但在许多其他div之后

我尝试的是：

我在stack overflow中搜索了类似的问题，但没有找到一个特定于Javascript的问题

我想到了使用一个按钮，当他们点击一个div时，这个按钮就会出现，一旦点击，就会得到该div的内容。我对此感到气馁，因为我首先不确定如何检测div单击，我想看看是否有一个无按钮解决方案

您可以使用

“输入”

事件来监听键盘或粘贴所做的所有更改

至于完成，这可能需要一些按钮，以便用户指示他们已经完成，或者使用计时器将存储的值与当前值进行比较，以检查是否已经进行了更改

document.getElementById（'bio'）.addEventListener（'input'，function（）{
控制台清除（）
log（this.innerHTML）
})

显然，这个用户更喜欢保持一种神秘的气氛。

下面是答案中小提琴的更新，显示如何捕捉该div的内容。您可以将其保存到文件中，而不是填充文本区域，例如：