javascript - 如何监控 jQuery 中的 body 'data' 属性何时发生变化？

Question

我的 body 标签中有 data-segment 属性，该属性由滑块更改。当它被改变时，我需要根据它的值触发一个函数。

我不确定在这种情况下如何附加事件侦听器？

Answer 1

`当 DOM 节点属性更改时，没有可靠的跨浏览器方式来接收事件。一些浏览器支持“DOM 突变事件”，但您不应该依赖它们，您可以通过 Google 搜索该短语来了解该技术的命运多舛的历史。

如果滑块控件没有触发自定义事件（我认为大多数现代事件都会触发），那么您最好的选择是设置一种setInterval()方法来轮询该值。

Answer 2

您可以使用，这是每个浏览器中都可用MutationObserver的 API ，并且避免使用. 如果你在 中引用了你的元素，你可以这样做：setIntervalelement

const mutationObserver = new MutationObserver(callback);
mutationObserver.observe(element, { attributes: true });

function callback() {
  // This function will be called every time attributes are
  // changed, including `data-` attributes.
}

使用此 API 可以轻松检测到元素中的其他更改，您甚至可以获取在回调中更改的属性的旧值和新值，在调用中调整配置对象observe。所有关于此的文档都可以在 MDN 中阅读：https ://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit

Answer 3

因为在我的用例中，我的所有内容.data('type', 'value')都设置在 javascript 块中，所以在我的情况下，我只是在.change()之后放置一个链.data(...)并使用正常访问更新$("#oh-my-data").change()

这对我来说很好，请参阅演示。

$("#oh-my-data").change(function() {
  $("#result").text($("#result").text() + ' ' + $(this).data('value'));
})

$("#oh-my-data").data('value', 'something1').change();

$("#oh-my-data").data('value', 'something2').change();

$("#oh-my-data").data('value', 'something3').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="oh-my-data" type="hidden" data-value="" /> Result: <span id="result"></span>

但是这个解决方案有一个问题，如果.data()是由外部库设置的，那么这将不起作用，因为你不能在.change()它上面添加。