JS.next(стандарты, фичи, движки)

[trikadin]

FINoM, плохо доку прочитал) Там есть фильтры, можно слушать только те атрибуты, которые тебе нужны (смотри "attributeFilter").

И да, раньше были MutationEvents, они были синхронными, и вот это было действительно медленно.

[trikadin]

И ещё: по поводу value -- меня полностью удовлетворяет oninput event (который, кстати, срабатывает и для элементов с contenteditable="true").

[FINoM]

trikadin, дык, понятно, я могу слушать oninput, но я хочу слушать изменение свойства, а не DOM событие или изменение атрибута.

[loljs]

Судя по доке он слушает все изменения ноды, а это медленно.

Да вроде нет, там конкретно указывается, что слушать, а что нет. И непонятно, зачем тебе тут скорость нужна вообще. Он отрабатывает только на событие. Что у тебя, миллион событий в секунду чтоли происходит?

[FINoM]

Что у тебя, миллион событий в секунду чтоли происходит?

Я хочу реализовать двусторонний байндинг, а там да, может быть очень много элементов.

[trikadin]

FINoM, так чем MutationObserver не устраивает, в итоге? Если ты начнёшь наблюдать за одним атрибутом value, то ты получишь оповещение о его изменении, что тебе и нужно, и при этом это будет асинхронно, что хорошо, ибо не тормозит отрисовку DOM'а.

[FINoM]

trikadin, я имею в виду не атрибут а свойство. Его разве можно слушать?

[trikadin]

FINoM, ну, ты узнаёшь об обновлении атрибута, и, соответственно, свойства, которое с ним синхронизировано. Не понимаю, видимо, в чём твоя проблема.

[FINoM]

trikadin, эм, я никогда не работаю с атрибутами, если есть возможность изменить свойство.

[trikadin]

trikadin, эм, я никогда не работаю с атрибутами, если есть возможность изменить свойство.

И? Проблема-то в чём? Вряд ли ты добавляешь DOM-объекту нестандартные свойства (у которых нет сопоставленных им атрибутов), а даже если, то вот как раз их ты можешь объявить аксессорами, а те свойства, у которых есть сопоставленные атрибуты, ты можешь слушать через MutationObserver.

<a id="search-link" href="http://google.com/" data-search="google" title="Гугл">Google</a>
<script>
'use strict';
const 
  link = document.querySelector('#search-link'),
  observer = new MutationObserver((mutationsList) => {
    console.log(mutationsList);
  });

observer.observe(link, {
  childList: true,
  attributes: true
});

link.href = 'http://yandex.ru/';
link.title = 'Яндекс';
link.dataset.search = 'yandex';
link.textContent = 'Yandex';
</script>

Смотреть в консоль.