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

Question

注意事项：

• 整个文档是content editable
• 主体附有input event
• 我需要获取已更改的特定元素的ID
• 只允许 vanilla Javascript

例如：如果我将 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

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

您是否可以将每个不同的元素单独标记为可编辑？按照下面的sn-p。

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>

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

Answer 2

我在您的控制台中添加了e.target.id。希望这对你有用

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

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