javascript - 当事件附加到文档时，获取 elem 的 id

Question

需要注意的点：

• 整个文件是content editable
• 身体有一个input event附着在它上面
• 我需要获取已更改的特定元素的 id
• 只允许使用原生 Javascript

例如：如果我换成TomPaul，我应该得到m1id。

问题：e.target返回正文元素而不是特定元素（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>

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

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>