Я добавляю несколько слушателей событий для ввода:
['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