TL; DR:
Ввод возврата каретки ↵ между двумя символами и, таким образом, автоматическое создание нового узла LI, какие события произошли в DOM в течение всего этого процесса и каков порядок?
Является ли мой вывод ниже верным? Конечно, вы также можете объяснить свои слова, не обращая внимания на многие мои слова, большое спасибо!
Я видел демо 1013 *, когда читал и изучал Наблюдатель мутаций в MDN и упростил его следующим образом:
const MutationObserver = window.MutationObserver
const list = document.querySelector(`ol`);
const config = {
characterData: true,
childList: true,
subtree: true,
}
const observer = new MutationObserver(mutations =>
console.log(mutations)
)
observer.observe(list, config)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mutation Observer & customize resize event listener & demo</title>
<style>
ol {
box-sizing: border-box;
max-width: 20rem;
border: 1px solid crimson;
resize: both;
}
</style>
</head>
<body>
<section>
<h1>Mutation Observer & customize resize event listener & demo</h1>
<strong>Please open the console of your own browser.</strong> (Because if using the too simple console in the Code Snippet on Stack Overflow, then your browser will be hanged for a few seconds when you inputting characters, since it is going to dump and display massive amounts of data.)
</section>
<section>
<ol contenteditable>
<li>a</li>
</ol>
</section>
<script>
const MutationObserver = window.MutationObserver
const list = document.querySelector(`ol`);
// options
const config = {
characterData: true,
childList: true,
subtree: true,
}
// instance
const observer = new MutationObserver(mutations =>
console.log(mutations)
)
observer.observe(list, config)
</script>
</body>
</html>
Я выполнил две операции (которые будут упомянуты ниже) в этой адаптированной демонстрации и наблюдал за консолью, но я не совсем уверен насчет конкретных событий (что происходит и какова последовательность?) в каждый MutationRecord, только для предположения в обратном порядке, что они есть (также упомянуто ниже).
Две операции и текст до и после каждой операции:
1. Введите символ «b» после символа «a»;
2. Введите возврат каретки ↵ между символами «a» и «b».
И весь вывод в консоли:
Ниже приведены мои предположения о процедурах событий для каждого MutationRecord с символьными аннотациями.
Подробная версия
// line 1: "a"
// [Operation 1] Enter a character "b" after the character "a":
// [Console output]
[MutationRecord]
0: MutationRecord {type: "characterData", target: text, …}
// OL > LI#1 > #text"a"(+)"b"
// list at line 1 added a character "b".
// line 1: "ab"
// [Operation 2] Enter a carriage return `↵` between the characters "a" and "b":
// [Console output]
Array(5) [MutationRecord, MutationRecord, MutationRecord, MutationRecord, MutationRecord]
0: MutationRecord {type: "childList", target: li, addedNodes: NodeList(1), removedNodes: NodeList(0), previousSibling: null, nextSibling: text, …}
// OL > LI#1 > (-+)#text"a"
// `↵` causes the text node containing the character "a" be split off from the li node transiently and then be prepended back to its original resident li node immediately.
1: MutationRecord {type: "characterData", target: text, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null, nextSibling: null, …}
// OL > LI#1 > #text(-+)"b"
// `↵` causes the character "b" be split off from its owner text node transiently and then be prepended back to its original resident text node immediately.
2: MutationRecord {type: "childList", target: ol, addedNodes: NodeList(1), removedNodes: NodeList(0), previousSibling: li, nextSibling: text, …}
// OL > (+)LI#2
// A new li node appears (for holding the text node which contains the character "b" at soon) and is appended to the end inside the ol node.
3: MutationRecord {type: "childList", target: li, addedNodes: NodeList(0), removedNodes: NodeList(1), previousSibling: text, …}
// OL > LI#1 > (-)#text"b"
// The last child of the first li node is moved out — the text node containing the character "b" is detached from the first li node.
4: MutationRecord {type: "childList", target: li, addedNodes: NodeList(1), removedNodes: NodeList(0), previousSibling: null, …}
// OL > LI#2 > (+)#text"b"
// The text node containing the character "b" is appended to the second li node.
// line 1: "a"
// line 2: "b"
Краткая версия
// line 1: "a"
// Enter a character "b" after the character "a".
// The mutation is equivalent to:
OL > LI#1 > #text"a"(+)"b"
// line 1: "ab"
// Enter a carriage return `↵` between the characters "a" and "b".
// The mutations are equivalent to:
OL > LI#1 > (-+)#text "a"
OL > LI#1 > #text(-+)"b"
OL > (+)LI#2
OL > LI#1 > (-)#text "b"
OL > LI#2 > (+)#text "b"
// line 1: "a"
// line 2: "b"