可编辑的变更事件

非jQuery快速又肮脏的答案：

function setChangeListener (div, listener) {

    div.addEventListener("blur", listener);
    div.addEventListener("keyup", listener);
    div.addEventListener("paste", listener);
    div.addEventListener("copy", listener);
    div.addEventListener("cut", listener);
    div.addEventListener("delete", listener);
    div.addEventListener("mouseup", listener);

}

var div = document.querySelector("someDiv");

setChangeListener(div, function(event){
    console.log(event);
});

我建议将侦听器附加到由editable元素触发的关键事件上，尽​​管您需要注意，keydown并且keypress在更改内容本身之前会触发事件。这不会涵盖更改内容的所有可能方法：用户还可以从“编辑”或上下文浏览器菜单中使用剪切，复制和粘贴，因此您可能也想处理cut copy和paste事件。此外，用户可以放置文本或其他内容，因此在那里有更多事件（mouseup例如，）。您可能希望轮询元素的内容作为后备。

2014年10月29日更新

从长远来看，HTML5 input事件是答案。在撰写本文时，contenteditable当前Mozilla（来自Firefox 14）和WebKit / Blink浏览器中的元素均支持该功能，但IE不支持。

演示：

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);

<div contenteditable="true" id="editor">Please type something in here</div>

Demo: http://jsfiddle.net/ch6yn/2691/

考虑使用MutationObserver。这些观察者旨在对DOM中的更改做出反应，并作为对Mutation Events的有效替代。

优点：

• 当发生任何更改时触发，这很难通过听其他答案建议的关键事件来实现。例如，所有这些都很好用：通过上下文菜单拖放，斜体，复制/剪切/粘贴。
• 设计时注重性能。
• 简单，直接的代码。与侦听10个事件的代码相比，理解和调试侦听一个事件的代码要容易得多。
• Google拥有出色的突变摘要库，这使使用MutationObservers非常容易。

缺点：

• 需要最新版本的Firefox（14.0 +），Chrome（18+）或IE（11+）。
• 需要了解的新API
• 关于最佳实践或案例研究的信息还很多

学到更多：

• 我写了一个小片段来比较使用MutationObserers处理各种事件。我使用balupton的代码，因为他的回答最多。
• Mozilla在API上有一个很棒的页面
• 看看MutationSummary库