Существует ли точный порядок выполнения обратных вызовов слушателей событий и обратных вызовов MutationObserver? - PullRequest
0 голосов
/ 27 мая 2018

Я добавляю несколько слушателей событий для ввода:

['input', 'keydown'].forEach(eventName => {
   document.getElementById('my-input').addEventListener(eventName, e => {
      console.log(`${eventName} event is handled');
   })
})

Также я добавляю наблюдателя мутации в документ:

const mutationObserver = new MutationObserver(mutationRecords => {
   console.log('Handled mutation records:', mutationRecords);
});

mutationObserver.observe(document, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
});

Если я запускаю этот код, я вижу следующий вывод:

keydown event is handled

input event is handled

Handled mutation records: ...

Как видите, обратный вызов мутации наблюдателя был вызван в конце.И я думаю, что это ожидаемое поведение, я объясню, как я вижу это:

Когда я ввожу символ в поле ввода, все зарегистрированные прослушиватели событий для этого ввода добавляются в очередь обратного вызова.После этого обратный вызов наблюдателя мутации также добавляется в очередь обратных вызовов - в результате мы видим, что обратный вызов наблюдателя мутации выполняется после обратных вызовов прослушивателей событий

Но если я добавлю прослушиватель событий в документ:

['input', 'keydown'].forEach(eventName => {
   document.addEventListener(eventName, e => {
      console.log(`${eventName} event is handled');
   })
})

Я вижу следующий вывод:

keydown event is handled

Handled mutation records: ...

input event is handled

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

НО мутацияНаблюдатель также добавляется в document, например, так что там должно применяться что-то вроде всплытия событий, не так ли?

Итак, мой вопрос:

Есть ли точный порядок выполнения?обратных вызовов слушателя событий и обратных вызовов MutationObserver?Могу ли я доверять приведенному выше порядку исполнения или он может измениться?

Также, пожалуйста, объясните, если мои мысли верны, и если да, то почему в последнем примере вывод равен

keydown event is handled

Handled mutation records: ...

input event is handled

, но не:

Handled mutation records: ...

keydown event is handled

input event is handled

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