如何实现类似jQuery .change()的功能监听HTML <p>元素innerHTML变化？

这个问题问得很实在！确实jQuery原生的.change()方法只认<input>、<textarea>和<select>这些表单元素，要监听<p>或者其他普通元素的innerHTML变化，咱们得借助原生的MutationObserver API来实现——而且完全可以把它封装成一个像.change()一样好用的jQuery自定义方法，用起来超顺手。

核心思路：封装jQuery自定义方法 #

我们可以把MutationObserver的逻辑包装成jQuery插件，这样调用方式和原生的事件绑定完全一致。下面是完整的封装代码：

$.fn.contentChange = function(callback, options) {
  // 默认监听配置：覆盖子节点、文本内容的变化
  const defaultConfig = {
    childList: true,
    subtree: true,
    characterData: true
  };
  // 合并用户自定义配置
  const config = $.extend({}, defaultConfig, options);

  return this.each(function() {
    const $el = $(this);
    // 先清理已存在的观察者，避免重复绑定
    const existingObserver = $el.data('contentObserver');
    if (existingObserver) {
      existingObserver.disconnect();
    }

    // 创建新的MutationObserver实例
    const observer = new MutationObserver(function(mutations) {
      // 触发回调，把当前元素作为this传入，同时传递变化记录
      callback.call($el[0], mutations);
    });

    // 开始监听当前元素
    observer.observe(this, config);
    // 把观察者实例存在元素的data属性里，方便后续销毁
    $el.data('contentObserver', observer);
  });
};

怎么用？和.change()一模一样！ #

封装好之后，你可以像使用.change()那样轻松监听元素内容变化：

// 监听指定p元素的内容变化
$('p.content-target').contentChange(function(mutations) {
  console.log('内容更新啦！当前内容：', this.innerHTML);
  // 还可以查看具体的变化细节
  mutations.forEach(mutation => {
    console.log(`变化类型：${mutation.type}，旧内容：${mutation.oldValue}`);
  });
});

// 如果需要停止监听（避免内存泄漏）
$('p.content-target').each(function() {
  const observer = $(this).data('contentObserver');
  if (observer) {
    observer.disconnect();
    $(this).removeData('contentObserver');
  }
});

可选配置说明 #

如果你需要自定义监听规则，可以在调用时传入配置对象：

• childList: false：只监听当前元素自身的文本变化，不监听子元素的增减
• subtree: false：不监听嵌套子元素的内容变化
• characterData: false：不监听文本内容的修改（只监听子节点增减）

比如只想监听当前元素的文本变化，不关心子元素：

$('p.simple-target').contentChange(function() {
  alert('文本变了！');
}, { subtree: false });

兼容性说明 #

MutationObserver是现代浏览器的标准API，Chrome、Firefox、Edge、Safari 11+都支持，完全不用担心兼容性问题。

内容的提问来源于stack exchange，提问作者JCollier