令人满意的变革事件

这是一个更有效的版本,on用于所有contenteditables.它基于这里的最佳答案.

$('body').on('focus', '[contenteditable]', function() {
    const $this = $(this);
    $this.data('before', $this.html());
}).on('blur keyup paste input', '[contenteditable]', function() {
    const $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
});

该项目在这里:https://github.com/balupton/html5edit

考虑使用MutationObserver.这些观察者旨在对DOM中的变化做出反应,并作为Mutation Events的高效替代品.

优点:

当发生任何变化时触发,这很难通过听取其他答案建议的关键事件来实现.例如,所有这些都运行良好:拖放,斜体,通过上下文菜单复制/剪切/粘贴.

设计时考虑到性能.

简单,直接的代码.理解和调试侦听一个事件的代码比听取10个事件的代码要容易得多.

Google有一个出色的变异汇总库,可以很容易地使用MutationObservers.

缺点:

需要最新版本的Firefox(14.0+),Chrome(18+)或IE(11+).

要理解的新API

目前还没有关于最佳实践或案例研究的大量信息

学到更多:

我写了一个小片段来比较使用MutationObserers来处理各种事件.我使用了balupton的代码,因为他的回答是最赞成的.

Mozilla在API上有一个很好的页面

看一下MutationSummary库

非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);
});

我修改了lawwantsin的答案,这对我有用.我使用keyup事件而不是keypress工作得很好.

$('#editor').on('focus', function() {
  before = $(this).html();
}).on('blur keyup paste', function() { 
  if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#editor').on('change', function() {alert('changed')});

const p = document.querySelector('p')
const result = document.querySelector('div')
const observer = new MutationObserver((mutationRecords) => {
  result.textContent = mutationRecords[0].target.data
  // result.textContent = p.textContent
})
observer.observe(p, {
  characterData: true,
  subtree: true,
})

abc