如何捕获按钮元素上data-value自定义属性的变更事件

实现下拉交互用到的DOM结构如下：

<button data-value="">'click'</button>
<ul>
 <li>option1</li>
 <li>option2</li>
</ul>

核心矛盾点：

• 原生change事件仅支持input、textarea、select这类表单元素，无法在普通button元素上触发，也不能直接监听data属性变更
• 直接给元素绑定click事件时，受事件绑定顺序、冒泡机制影响，回调执行时data-value可能还没完成更新，拿不到最新值

1. 原生无依赖方案：使用MutationObserver监听属性变动 #

MutationObserver是浏览器原生提供的DOM变动监听API，可以精准捕获元素属性的变更，完全不依赖事件绑定顺序，只要DOM上的data-value属性发生修改就会触发回调，是通用性最高的方案。
示例代码：

const targetBtn = document.querySelector('button');

// 初始化属性监听器
const attrObserver = new MutationObserver((mutationList) => {
  mutationList.forEach(mutation => {
    // 过滤非data-value的属性变更
    if (mutation.attributeName === 'data-value') {
      const latestValue = targetBtn.getAttribute('data-value');
      // 此处写属性变更后的业务逻辑
      console.log('data-value已更新，最新值为：', latestValue);
    }
  })
})

// 启动监听，指定监听属性变动
attrObserver.observe(targetBtn, { attributes: true });

// 下拉选项点击逻辑示例，无论你在哪个逻辑分支修改data-value，监听器都能捕获到
document.querySelectorAll('li').forEach((option, index) => {
  option.addEventListener('click', () => {
    // 对应option1值为"1"、option2值为"2"的逻辑
    targetBtn.setAttribute('data-value', String(index + 1));
  })
})

2. jQuery场景轻量方案：自定义事件手动触发 #

如果项目中已经引入jQuery，可以绕开原生事件的限制，自定义专属事件，在data-value更新完成后手动触发事件，从根源上避免时机问题。
示例代码：

// 给按钮绑定自定义的value更新事件
$('button').on('valueUpdate', function() {
  const latestValue = $(this).attr('data-value');
  // 此处写属性变更后的业务逻辑
  console.log('data-value已更新，最新值为：', latestValue);
});

// 选项点击逻辑
$('li').on('click', function() {
  const optionValue = String($(this).index() + 1);
  // 先完成data-value的更新
  $('button').attr('data-value', optionValue);
  // 更新完成后手动触发自定义事件，此时一定能拿到最新值
  $('button').trigger('valueUpdate');
})

注意：jQuery的.data()方法会把值存在jQuery内部缓存中，不会同步修改DOM上的data-*属性，如果要兼容MutationObserver的监听逻辑，更新值时请同时修改DOM attribute，不要只用.data()赋值。

3. 临时方案：调整click逻辑顺序 #

如果只是简单场景不需要复用监听逻辑，可以直接把取值、后续业务逻辑写在data-value更新代码的后面，不需要额外做事件监听。之前click事件拿不到值，本质是回调执行时机早于赋值逻辑，只要调整顺序即可：

$('li').on('click', function() {
  const optionValue = String($(this).index() + 1);
  // 先赋值
  $('button').attr('data-value', optionValue);
  // 再写后续逻辑，此时拿到的一定是最新值
  console.log($('button').attr('data-value'));
})

这个方案耦合度高，如果后续有其他逻辑分支也会修改data-value，需要重复写业务逻辑，维护成本高，仅适合简单临时场景使用。 #

内容的提问来源于stack exchange，提问作者유태양