NEW ANSWER

Question

以下代码在Chrome / Safari中不起作用但在FireFox中运行良好的原因是什么？

$(function() {
    $('.button').on("DOMSubtreeModified",function(){
        alert("button value changed");
    });
});

有没有其他方法可以在其他浏览器中实现？我试图检测按钮值的变化。

与按钮值动态更改的.button绑定的事件是什么？

Answer 1

在我的感知onchange中，只有在输入改变时才会触发输入元素。由于您是指按钮，因此输入不会更改，并且change事件不会触发。因此，您需要一个监控元素更改的解决方案：

对于现代浏览器，我建议变异观察者：

        var observer = new MutationObserver( [observer function] );
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: true, subtree: true };

        // pass in the target node, as well as the observer options
        observer.observe(element, config);

这会为您的元素添加一个变异观察者。您可以配置观察者需要监听的选项。 Jquery 本身（尚未）支持此功能。

childList 如果要观察目标节点的子元素（包括文本节点）的添加和删除，则设置为true。   attributes如果要观察到目标属性的突变，则设置为true。

characterData 如果要观察目标数据的突变，则设置为true。

子树如果要观察到不仅仅是目标的突变，还要观察目标的后代，则设置为true。

attributeOldValue 如果在需要记录突变之前将属性设置为true并设置目标属性值，则设置为true。

characterDataOldValue 如果在需要记录突变之前将characterData设置为true并设置目标数据，则设置为true。

attributeFilter 如果不需要观察所有属性突变，则设置为属性本地名称数组（不带名称空间）。


来源：MDN

哪些浏览器支持此功能：CanIuse
在这里阅读更多内容：MDN

对于您的项目：

$(".button").each(function(){
    this.observer = new MutationObserver( observeButtonChange);
    // configuration of the observer:
    //you can play with these.
    var config = { attributes: false, childList: true, characterData: true, subtree: false};

    // pass in the target node, as well as the observer options
    this.observer.observe(this, config); //starts the actual observing of the element.

});

function observeButtonChange(mutations)
{
    alert("Button has changed");
}

此代码使用类名.button搜索页面上的所有元素，并使用jQuery＆＃39; each将 Mutation Observer 附加到其中。每次更改button的 DOM树时，它都会触发observeButtonChange函数。事件对象mutations包含有关触发事件的大量信息，包括添加和删除的元素。它是一个包含各种侦听器数据的数组。我建议您听一下characterData和childList选项，因为它们表示按钮值的变化。

Answer 2

NEW ANSWER

第二次尝试！我要做的是使用jQuery ON和TRIGGER的组合。

创建一个自定义事件监听器，如下所示：

$( ".button" ).on( "dynValueChange", function() {
    alert("button value changed");
});

然后，将以下触发器添加到动态更改按钮值的函数中。

$(".button").trigger("dynValueChange");

这可能不像使用DOMSubtreeModified那样干净或简单，但我可以保证它适用于所有浏览器。

如果需要更好的解释，请告诉我。

原始答案

尝试使用以下代码。这利用jQuery更改函数在“.button”元素上应用事件处理程序。这仅在元素“.button”的value属性发生变化时才有效。

$(function() {
    $('.button').change(function(){
        alert("button value changed");
    });
});

祝你好运！ http://api.jquery.com/change/

亚当

Answer 3

The section about legacy events in the DOM level 3 spec应该为您解答为什么在所有浏览器中都没有实现此事件，为什么它的工作方式不一致，为什么它会随着时间的推移在较少的浏览器中提供，以及它为什么会这样做使用它通常是一个坏主意。 TL; DR;它很慢，因此它已被弃用，并且随着更新的浏览器版本的发布，对它的支持将被删除。

与此同时，the section about mutation observers in the newest DOM spec提供了替代。

Mozilla开发者网络提供的干燥程度较低more hands-on usable description of mutation observers。 jQuery没有提供使用变异观察器的内置快捷方式，所以你必须手动将你的观察者附加到DOM上 - 但是你可以使用jQuery。

突变观察者可以这样附着：

var target = $(".button" )[0];
var observer = new MutationObserver(function(mutations) {
    // body of your handler comes here - you can use jQuery in here
    // typically, you iterate over mutations here, and handle
    // each according to its type
});
// additional members for configuration documented in the spec
// attributes: true says the observer should receive a mutation
// when an attribute of the watched target changes
var observerConfig = { attributes: true }; 
observer.observe(target, observerConfig);

稍后，当您完成观察突变时，您应该销毁您的变异观察者，以便为浏览器轻松进行垃圾收集：

observer.disconnect();

您传递给变异观察者的函数收到的mutations参数是MutationRecord的数组 - 也在the spec中描述。此接口具有各种成员，用于查询其类型（属性更改，文本更改，添加或删除的子项等），以及更改的内容 - 更改后的属性名称及其更改前的值，类型为{{1}的突变}。

请注意，上面的代码示例仅附加到DOM中具有类attributes的第一个元素。您需要为每个目标调用button，将其附加到具有类observer.observe()的所有元素：

button

根据the spec，你可以使用一个观察者观察几个元素的突变，因此你不需要为每个$('.button').each(function(index, element) { observer.observe(element, config); });创建一个新的。

我认为这不如DOM突变事件那么方便。但你想要的仍然是可行的。

$（'。button'）。on（“DOMSubtreeModified”）在chrome / safari中不起作用，但在Firefox中有效

3 个答案:

NEW ANSWER

原始答案