Реализация MutationObserver вместо DOMSubtreeModified

Question

У меня есть select[multiple], который я дал класс custom-multiselect на моей странице, для которой я уловивший DOMSubtreeModified событие следующим образом:

HTML:

<select class="custom-multiselect"></select> 

JQuery:

$('.custom-multiselect').each(function (i, select) { 
    var sel = this; 
    adjustHeight(sel); //Custom function 
    //Binding DOMSubtreeModified to catch if the select list gets modified by the user 
    $(sel).on('DOMSubtreeModified', function() {    
     adjustHeight(sel); 
    }); 
    //For Internet Explorer 
    $(sel).on('propertychange', function() { 
     adjustHeight(sel); 
    }); 
}); 

Этот подход работает безупречно. Я хочу преобразовать функцию DOMSubtreeModified в MutationObserver, так как DOMSubtreeModified амортизируется.

Так что я сделал что-то вроде этого:

var observer = new MutationObserver(function (mutation) { 
    mutation.forEach(function (m) { 
     if (m.type == 'subtree') { 
      adjustHeight(this);//Can I use m.target here? 
     } 
    }); 
}); 
observer.observe(document.querySelector('select.custom-multiselect'), { 
    subtree: true 
}); 

Но я в конечном итоге получить ошибки

TypeError: The expression cannot be converted to return the specified type.

Как я могу конвертировать мой DOMSubtreeModified событие наблюдается в MutationObserver?

Answer 1

• Поместите код вместо старого события DOM и используйте переменную sel в качестве цели наблюдения;
• Используйте опцию childList в MutationObserver, потому что subtree не определяет, что искать;
• Нет необходимости проверять мутации, поскольку вы подписываетесь только на один тип.

$('.custom-multiselect').each(function() { 
    var sel = this; 
    adjustHeight(sel); 

    new MutationObserver(function() { 
     adjustHeight(sel); 
    }).observe(sel, {childList: true, subtree: true}); 
}); 

Или, если вам нравится .bind по некоторым причинам:

new MutationObserver(adjustHeight.bind(null, sel)) 
    .observe(sel, {childList: true, subtree: true});