javascript - 当事件附加到文档时获取元素更改的 id

Question

注意事项:

• 整个文档是content editable
• 正文附加了一个输入事件
• 我需要获取已更改的特定元素的 ID
• 只允许vanilla Javascript

e.g :如果我将 Tom 更改为 Paul，我应该将 m1 作为 id。

问题:e.target 返回 body 元素而不是 specifc 元素(div#m1 )

document.body.contentEditable = true;
document.body.addEventListener('input', e => {
  console.log(e.target)
})

<div id="m1">Hello Tom</div>
<div id="m2">Hello Sam</div>

Answer 1

问题是 - 如果整个正文都是可编辑的，当您的用户开始编辑时，您如何知道哪些元素将保留，或完全删除，甚至添加？

您是否可以接受将每个不同的元素标记为可独立编辑？根据下面的代码片段。

document.getElementById('m1').contentEditable = true;
document.getElementById('m2').contentEditable = true;

document.body.addEventListener('input', e => {
  console.log(e.target)
})

<div id="m1">Hello Tom</div>
<div id="m2">Hello Sam</div>

当然也可以使用循环将每个元素设置为可编辑，不重复代码并自动适应不同的文档结构。