Javascript 如何在contenteditable div中编辑确切的元素？

我有一个contenteditable div，附带了一个keyup事件。当用户键入时，在该div中创建了许多

p

标记

$(".pad").keyup(function(e) {
    doSomething();
});

这就是

keyup

事件

如何确定用户在contenteditable div中编辑/创建了哪个元素

我尝试了以下方法，但似乎不起作用：

$(".pad p").keyup(function(e) {
    doSomething();
});

我们的目标是实现这样的目标：

$(".pad").keyup(function(e) {
    theEditedElement = ...;
    $(theEditedElement).css("color","red");
    $(theEditedElement).(...);
});

我们从以下几点开始：

<div class="pad" contenteditable="true">
    <p>Some text</p>
</div>

一些文本

然后，用户将对其进行编辑，以：

<div class="pad" contenteditable="true">
    <p>Some text</p>
    <p>Some more text</p>
    <p>Even <b>more</b> text</p>
</div>

一些文本

更多的文字

更多文本

---

如果用户决定编辑更多的文本，则应检索特定的

元素。
如果希望事件目标是内容可编辑的
div的子节点，而不是
div
本身，则需要将这些子节点设置为
内容可编辑的
。你可以像这样动态地做


const contentEl=document.querySelector（'.pad'）；
const paras=contentEl.childNodes；
//在这里，为该div内的所有段落设置contenteditable属性
for（设i=0；i{
//event.target将是您请求的元素
const theEditedElement=event.target；
控制台日志（theEditedElement）；
theEditedElement.style.color='red'；
});

一些文本

更多的文字

更多文本