1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .box { width: 400px; height: 400px; border: 1px solid #000; } </style> </head> <body> <div id="wrapper"> <div class="box" contenteditable="true"> <input type="text" class="inp" value="ㅇㅇㅇ"> 여기에 글짜를 쳐봐라. </div> <button class="btn1">css추가</button> <button class="btn2">css추가</button> <button class="btn3">css추가</button> <button class="btn4">sytle속성삭제</button> <button class="btn5">data속성추가</button> <button class="btn6">data속성변경</button> <button class="btn7">addClass</button> <button class="btn8">removeClass</button> <button class="btn9">innerHTML</button> <button class="btn10">innerHTML</button> <button class="btn11">text 추가</button> <button class="btn12">text 추가</button> </div> <script src="lib/jQuery/2.2.3/jquery.min.js"></script> <script type="text/javascript"> // IE는 11버전부터 지원한다. /* childList 대상 노드의 자식 요소 (텍스트 노드 포함)의 추가 및 제거를 감시 attributes 대상 노드의 속성 변경을 감시 characterData 대상 노드의 텍스트 콘텐츠(자식 텍스트 노드) 값에 대한 변경 사항을 모니터링 (2번 이벤트 발생 ??????) subtree 대상 노드 및 대상요소의 자식 자손까지 모두 감시 (childList, attributes 또는 characterData도 true이어야 함) attributeOldValue 속성 값이 변경 전의 값을 받을 수 있다. characterDataOldValue 요소 내부 텍스트를 변경할 경우 이전 값을 받을 수 있다. (2번 이벤트 발생 ??????) attributeFilter 감시할 속성명들을 배열 형태로 정의할 수 있다. (네임스페이스 빼고 입력) 예를 들어 [“value”] 일 경우 해당 요소의 value 값만 바뀔 경우에만 감시 이벤트가 발생한다. */ (function($) { $.fn.watch = function(cb) { var conf = { attributes:true, subtree:true, childList:true, attributeOldValue:true, //characterData:true, //characterDataOldValue:true, // attributeFilter: ["data-a"], // data-a 속성 변경만 감시 }; $(this).each(function() { var that = this; function callback(record) { // console.log(typeof cb); // function // cb(parm, this); // console.log(this); // MutationObserver Object // console.log(record); // [MutationRecord] cb.call(that, record, this); // this 바인딩 } // observer.disconnect(); // 감시를 중지 // observer.observe(target, config); (new MutationObserver(callback)).observe(this, conf); }); }; })(jQuery); var box = $('.box'); box.watch(function(record, observer) { console.log(this); console.log(record); console.log(observer); console.log(record[0].type); console.log(record[0].oldValue); // 속성 변경 전의 값 console.log(record[0].attributeName); //console.log(record[0].characterDataOldValue); }); $(".btn1").click(function(e) { box.css("top", "10px"); }); $(".btn2").click(function(e) { box.css("background-color", "red"); }); $(".btn3").click(function(e) { box.css("border-color", "blue"); }); $(".btn4").click(function(e) { box.removeAttr('style') }); $(".btn5").click(function(e) { box.attr("data-a", "5000"); }); $(".btn6").click(function(e) { box.attr("data-a", "9000"); }); $(".btn7").click(function(e) { box.addClass('boxtest'); }); $(".btn8").click(function(e) { box.removeClass('boxtest'); }); $(".btn9").click(function(e) { box.html("<div>안녕하세용<div>"); }); $(".btn10").click(function(e) { box.html("<div>안녕하세용22<div>"); }); $(".btn11").click(function(e) { box.text("xxxxxxxxxxxxxxxxxxxxxxxxx"); // (2번 이벤트 발생 ??????) }); $(".btn12").click(function(e) { box.text(box.text()+"===================="); // (2번 이벤트 발생 ??????) }); </script> </body> </html> |
참고 : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
참고 : https://msdn.microsoft.com/ko-kr/library/dn265034(v=vs.85).aspx
참고 : http://ukjinplant.tumblr.com/post/109571347591/mutationevent-mutationobserver
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 브라우저 뒤로가기 막기 (0) | 2018.07.12 |
|---|---|
| [JavaScript] 모바일, pc 접속 브라우저 체크 (0) | 2018.03.15 |
| [JavaScript] setTimeout - 폴링 시작, 정지 (0) | 2018.01.04 |
| [JavaScript] 자바스크립트 함수 속도체크 (0) | 2017.12.26 |
| [JavaScript][Tip] 두개의 JSON 객체가 일치 하는지를 비교 - 문자열 변환후 비교 (0) | 2017.11.08 |
