Created
December 15, 2012 00:12
-
-
Save DBJDBJ/4289825 to your computer and use it in GitHub Desktop.
My 2009 R+D on DOM page changes and "Mutation Events". Tested on Chrome only. And perhaps in IE too ;)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html > | |
| <!-- $Revision: 1 $ $Date: 22/12/09 17:10 $ $Author: Admin $ --> | |
| <html> | |
| <head> | |
| <!-- Set document compatibility mode to IE8Mode --> | |
| <!-- meta http-equiv="X-UA-Compatible" content="IE=edge" / --> | |
| <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js" onload="alert('Firebug Lite Loaded')"></script> | |
| <title>dbj*Mutator $Revision: 1 $ $JustDate: 22/12/09 $</title> | |
| <style type="text/css"> | |
| body { font: smaller/1.5 verdana,arial; } | |
| .ram { border:2mm solid #CCCCCC; } | |
| div { margin:5mm; padding:5mm; font-size:larger; width:66%; } | |
| .title { width:100; font-size:14px; background-color: #c0c0c0; font-weight:bolder; } | |
| .result { font:12px/1.1 verdana,tahoma,arial; padding:5px; height:200px; width:97%; overflow:auto; } | |
| </style> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript" id="JQ.1.3" ></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript" > | |
| var mutation_events_support = document.implementation.hasFeature("MutationEvents", "2.0") || window.MutationEvent, | |
| $root = null, $container = null; | |
| $(function() { | |
| // | |
| // | |
| $root = $(document); | |
| $container = $root.find("#container"); | |
| if (!mutation_events_support) return; | |
| var mE = document.createEvent("MutationEvents"); | |
| /* | |
| CHROME MutationEvent has this properties, and intial values : | |
| attrChange: 0 | |
| attrName: "" | |
| bubbles: false | |
| cancelBubble: false | |
| cancelable: false | |
| clipboardData: undefined | |
| currentTarget: null | |
| eventPhase: 0 | |
| newValue: "" | |
| prevValue: "" | |
| relatedNode: null | |
| returnValue: true | |
| srcElement: null | |
| target: null | |
| timeStamp: Date | |
| type: "" | |
| */ | |
| function idn(E) { return " " + (E ? E.tagName + (E.id ? "#" + E.id : "") : "none"); } | |
| function event_analyzer(event) { | |
| log("<b>" + event.type + "</b> relatedNode:" + idn(event.relatedNode) + ", srcElement:" + idn(event.srcElement) + ", target:" + idn(event.target) | |
| + "<br/> $container.length: " + $container.length + "<hr/>"); | |
| } | |
| // $root.find("#container")[0].addEventListener("DOMSubtreeModified", event_analyzer, false); | |
| // | |
| $container[0].addEventListener("DOMNodeInserted", event_analyzer, false | |
| ); | |
| // | |
| $container[0].addEventListener("DOMNodeRemoved", event_analyzer, false | |
| ); | |
| }); | |
| var div_id_ = 0, divid = function () { return "myDIV" + (div_id_++); } ; | |
| function add () { $container.append("<div id='" + divid() + "' class='ram' >" + (new Date).toString() + "</div>"); } | |
| function remove() { $container.find("div:last").remove(); } | |
| </script> | |
| <button onclick="add()">Add</button> | |
| <button onclick="remove()">Remove</button> | |
| <hr/> | |
| <p class="result ram"></p> | |
| <span id="container" class="ram"></span> | |
| </body> | |
| <script type="text/javascript" id="lib" > | |
| function log ( obj ) { | |
| var tid = setTimeout(function() { | |
| clearTimeout(tid); | |
| log.target.append("<li>" + obj + "</li>"); | |
| }, 1); | |
| } | |
| log.target = $("p.result") ; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment