当 HTML 元素在 contenteditable 中被删除时如何触发事件答案

【问题标题】：How to fire an event when HTML element gets deleted in contenteditable当 HTML 元素在 contenteditable 中被删除时如何触发事件
【发布时间】：2012-10-24 01:24:03
【问题描述】：

我有一个内容可编辑的 div，其中包含一些 html 元素。例如，假设我有：

<div contenteditable="true" id="myTextArea">
   Some content, <div id="div1">content in div</div>, 
   and more <span id="span1">content</span></div>

当用户在 myTextArea 中编辑文本并删除一些 html 元素（通过粘贴新内容或只是退格文本）时，我希望每个 html 元素触发一个事件并告诉我它已被删除。关于我如何做到这一点的任何想法？

【问题讨论】：

查看相关问题的答案：stackoverflow.com/a/5614764/1615483
这里是 MutationObserver 的 MDN 页面，你会对 removedNodes 感兴趣。
好吧，“输入”事件似乎没有给我实际导致事件的对象，并且 DOMNodeRemoved 似乎有问题（或者我不明白它是如何工作的），因为它只是有时有效（例如，在跨度上，很少在 div 上）。有人有这个工作吗？我总是可以比较差异，看看输入事件后发生了什么变化，但我觉得必须有更好的方法来做到这一点。

标签： javascript html events

【解决方案1】：

您可以使用MutationObserver 来实现此目的。要跟踪从 contenteditable 元素中删除的任何类型的节点，请查看以下示例

<div id="myTextArea" contenteditable="true">
    <input value="input" />
    <span contenteditable="false">span</span>
</div>

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

        //console.log($(mutation.removedNodes)); // <<-- includes text nodes as well

        $(mutation.removedNodes).each(function(value, index) {
            if(this.nodeType === 1) {
                console.log(this) // your removed html node
            }
        });
    });
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe($('#myTextArea')[0], config);

JSFiddle Link

【讨论】：