javascript - MutationObserver not working -
consider following code:
var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver; var observer = new mutationobserver(function(mutations) { mutations.foreach(function(mutation) { console.log(mutation.target.nodename); }); }); observer.observe(document, { attributes: true, childlist: true, characterdata: true });<div> <ol contenteditable oninput=""> <li>press enter</li> </ol> </div>which slight modification of this.
interacting jsbin version page not produce log. wrong? notice if substitute line
observer.observe(document, { with
observer.observe(document.queryselector('ol'), { the script turns on working...
it doesn't appear work because not mutating observing. neither changing
- attributes (
attributes: true) ofdocumentnode (which understandable, sincedocumentdoesn't have attributes) - child nodes (
childlist: true): child node ofdocument<html>node, , not removing or replacing it. - character data (
characterdata: true): not changing text, comment, or processinginstruction children ofdocument(also understandable becausedocumentcannot have such children).
if replace <html> node, can see mutation observer works configured.
var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver; var observer = new mutationobserver(function(mutations) { mutations.foreach(function(mutation) { console.log(mutation.target.nodename); }); }); observer.observe(document, { attributes: true, childlist: true, characterdata: true }); document.replacechild(document.createelement('div'), document.documentelement);what doing changing content of ol element, descendant of document.
if want listen these kind of changes, have set subtree true:
observer.observe(document, { attributes: true, childlist: true, subtree: true, characterdata: true }); more information in mdn documentation.
var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver; var observer = new mutationobserver(function(mutations) { mutations.foreach(function(mutation) { console.log(mutation.target.nodename); }); }); observer.observe(document, { attributes: true, childlist: true, subtree: true, characterdata: true });<div> <ol contenteditable oninput=""> <li>press enter</li> </ol> </div>
Comments
Post a Comment