jQuery如何监听元素属性变化？以textarea的disabled属性为例

嘿，这问题问得好！当然有办法实现监听元素属性变化的需求，而且现在主流浏览器都支持非常靠谱的方案——MutationObserver，完全能满足你监听textarea的disabled属性变更的需求。下面给你详细拆解可行的实现方式：

1. 原生API：MutationObserver（推荐） #

这是现代浏览器提供的标准DOM监听API，专门用来捕获DOM的各类变化（包括属性修改、子节点增减、内容变更等），性能稳定且功能强大，是当前的最优解。

针对你的textarea#test场景，监听disabled属性变化的具体代码如下：

// 获取目标文本框元素
const targetTextarea = document.getElementById('test');

// 创建MutationObserver实例，定义属性变化时的回调逻辑
const attributeObserver = new MutationObserver((mutations) => {
  // 遍历所有触发的DOM变更记录
  mutations.forEach((mutation) => {
    // 只处理我们关心的disabled属性变化
    if (mutation.attributeName === 'disabled') {
      // 根据当前状态给出对应提示
      if (!targetTextarea.disabled) {
        alert("Textarea enabled");
      } else {
        alert("Textarea disabled");
      }
    }
  });
});

// 配置监听规则：开启属性监听，且仅监听disabled属性（提升性能）
attributeObserver.observe(targetTextarea, {
  attributes: true,
  attributeFilter: ['disabled']
});

关键细节说明： #

• attributeFilter是可选配置，但加上它可以让Observer只聚焦在disabled属性上，避免处理无关的属性修改，大幅提升监听效率。
• 回调函数中的mutation对象包含了变更的详细信息，比如变更前的属性值（oldValue），如果需要对比状态也可以用上。

2. jQuery风格的封装方案（适配你的期望写法） #

如果你习惯用jQuery的语法风格，我们可以基于MutationObserver封装一个自定义事件，这样就能实现你想要的类似$("#test").on("change attribute", ...)的写法：

// 封装jQuery自定义事件：监听指定属性变化
$.fn.onAttributeChange = function(callback, watchAttributes) {
  return this.each(function() {
    const currentElement = this;
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        // 如果指定了监听属性列表，只处理列表内的属性变更
        if (!watchAttributes || watchAttributes.includes(mutation.attributeName)) {
          callback.call(currentElement, mutation);
        }
      });
    });
    observer.observe(currentElement, { 
      attributes: true, 
      attributeFilter: watchAttributes 
    });
  });
};

// 按照你期望的方式调用
$("#test").onAttributeChange(function(mutation) {
  if (mutation.attributeName === 'disabled' && !this.disabled) {
    alert("Textarea enabled");
  }
}, ['disabled']);

额外提示 #

• 如果你需要兼容IE10及以下的老旧浏览器，可以考虑用IE专属的onpropertychange事件，但现在这类浏览器的市场占比极低，一般不推荐额外兼容。
• 不要直接依赖“修改属性时手动触发自定义事件”的方案——这种方式不够灵活，如果属性是通过第三方代码、浏览器原生行为（比如表单重置）修改的，你就监听不到了，MutationObserver才是通用且可靠的选择。

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