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

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。 屬性如果要觀察到目標屬性的變異，則設置為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的each元素將Mutation Observer附加到它。 每次更改button的DOM樹時 ，都會觸發observeButtonChange函數。 事件對象mutations包含有關觸發事件的許多信息，包括已添加和刪除的元素。 它是一個包含有關各種偵聽器的數據的數組。 我建議聽一下characterData和childList選項，因為它們表明按鈕的值發生了變化。

Answer 2

新答案

第二次嘗試！ 我要做的是結合使用jQuery ON和TRIGGER。

創建一個自定義事件偵聽器，如下所示：

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

然后，將以下觸發器添加到動態更改按鈕值的函數中。

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

這可能不像使用DOMSubtreeModified那樣干凈或容易，但是我可以保證它適用於所有瀏覽器。

讓我知道是否需要更好的解釋。

原始答案

嘗試使用下面的代碼。 這利用jQueries更改功能將事件處理程序應用於“ .button”元素。 僅當元素“ .button”上的value屬性更改時，此方法才有效。

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

祝好運！ http://api.jquery.com/change/

亞當

Answer 3

有關DOM 3級規范中的遺留事件的部分，應為您提供一個答案，為什么該事件未在所有瀏覽器中實現，為何工作不一致，為什么隨着時間的流逝將在更少的瀏覽器中提供，以及為什么通常不好使用它的想法。 TL; DR; 它的速度很慢，因此已被棄用，隨着新版本瀏覽器的發布，對它的支持也被刪除。

同時， 最新DOM規范中有關突變觀察者的部分提供了替代內容。

Mozilla開發人員網絡對突變觀察者的描述較為干燥， 實用 。 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的數組-也在規范中進行了描述。 此接口具有各種成員，可用於查詢其類型（屬性更改，文本更改，添加或刪除的子代等），以及更改內容是什么-更改屬性的名稱及其更改前的值，以獲取類型attributes的突變。

請注意，以上代碼示例僅附加到DOM中帶有類button的第一個元素。 您需要為每個目標調用observer.observe() ，以使用class button將其附加到所有元素：

$('.button').each(function(index, element) {
    observer.observe(element, config);
});

根據規范，您可以使用一個觀察者來觀察幾個元素上的突變，因此您無需為每個.button創建一個新.button 。

我認為這不會像DOM突變事件那樣方便。 但是您想要的仍然可行。