jacascript DOM變動事件

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！

DOM變動事件

　　變動事件（MutationEvent）能在DOM中的某一部分發生變化時給出提示，這類事件非常有用，但都只能使用 DOM2 級事件處理程式，且由於瀏覽器相容性不好，所以用的不廣泛；

 刪除節點變動

　　刪除節點時，涉及到 DOMNodeRemoved、DOMNodeRemovedFromDocument 和 DOMSubtreeModified 這三個事件；事件觸發的先後順序是 DOMNodeRemoved 事件、DOMNodeRemovedFromDocument 事件和 DOMSubtreeModified 事件，下麵將詳細介紹；

　　在使用 removeChild() 或 replacechild() 從DOM中刪除節點時，會觸發 DOMNodeRemoved 事件。而 event.relatedNode 屬性中包含著對目標節點父節點的引用。在這個事件觸發時，節點尚未從其父節點刪除，因此其 parentNode 屬性仍然指向父節點。該事件會冒泡；IE8及以下瀏覽器不支持；

        <div id="wrapper" style="height: 50px; width: 100px;">
            <div id="test">1</div>
        </div>
        <div id="btn">刪除子節點</div>
        <script type="text/javascript">
            var oWrapper = document.getElementById("wrapper");
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oTest.addEventListener("DOMNodeRemoved",function(ev){
                ev = ev || event;
                console.log(ev.target.innerHTML);
　　　　　　　　    ev.relatedNode.style.backgroundColor = 'red';
//              this.parentNode.style.backgroundColor = 'red';
            })
            
            oBtn.onclick = function(){
                oWrapper.removeChild(oTest);
            }
        </script>

　　如果被移除的節點包含子節點，那麼在其所有子節點以及這個被移除的節點上會相繼觸發 DOMNodeRemovedFromDocument 事件，這個事件不會冒泡，目標 target 指向被移除的節點；該事件只有 chrome/safari/opera 瀏覽器支持；

        <div id="wrapper" style="height: 50px; width: 100px;">
            <div id="test">1</div>
        </div>
        <div id="btn">刪除子節點</div>
        <script type="text/javascript">
            var oWrapper = document.getElementById("wrapper");
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oTest.addEventListener("DOMNodeRemovedFromDocument",function(ev){
                ev = ev || event;
                console.log(ev.target.innerHTML);
//                this.parentNode.style.backgroundColor = 'green';
            })
            
            oBtn.onclick = function(){
                oWrapper.removeChild(oTest);
            }
        </script>

　　在DOM結構中發生任何變化時都會觸發 DOMSubtreeModified 事件，該事件在其他任何事件觸發後都會觸發，該事件的目標是被移除節點的父節點；IE8及以下瀏覽器不支持；

        <div id="wrapper" style="height: 50px; width: 100px;">
            <div id="test">1</div>
        </div>
        <div id="btn">刪除子節點</div>
        <script type="text/javascript">
            var oWrapper = document.getElementById("wrapper");
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oWrapper.addEventListener("DOMSubtreeModified",function(ev){
                ev = ev || event;
                console.log(ev.type);//DOMSubtreeModified
//                this.style.backgroundColor = 'pink';
            })
            
            oBtn.onclick = function(){
                oWrapper.removeChild(oTest);
            }
        </script>

插入節點變動

　　插入節點時涉及到 DOMNodeInserted 事件、DOMNodeInsertedIntoDocument 事件及 DOMSubtreeModified 事件，事件觸發的先後順序是 DOMNodeInserted 事件、DOMNodeInsertedIntoDocument 事件和 DOMSubtreeModified 事件，下麵將詳細介紹；

　　在使用 appendChild()、replaceChild() 或 insertBefore() 向DOM中插入節點時，首先觸發 DOMNodeInserted 事件；這個事件的目標是被插入的節點，而 event.relatedNode 屬性中包含一個對父節點的引用；在這個事件觸發時，節點已經被插入到了新的父節點中。這個事件是冒泡的，因此可以在DOM的各個層次上處理它；IE8及以下瀏覽器不支持；

        <div id="wrapper" style="height: 50px; width: 100px;">
        </div>
        <div id="btn">添加子節點</div>
        <div id="test">1111111</div>
        <script type="text/javascript">
            var oWrapper = document.getElementById("wrapper");
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oTest.addEventListener("DOMNodeInserted",function(ev){
                ev = ev || event;
                ev.relatedNode.style.backgroundColor = 'pink';
//                this.parentNode.style.backgroundColor = 'pink';
            })
            
            oBtn.onclick = function(){
                oWrapper.appendChild(oTest);
            }
        </script>

　　在新插入的節點上面會觸發 DOMNodeInsertedIntoDocument 事件。這個事件不冒泡，因此必須在插入節點之前為它添加這個事件處理程式。這個事件的目標是被插入的節點;該事件只有chrome/safari/opera瀏覽器支持;

        <div id="wrapper" style="height: 50px; width: 100px;">
        </div>
        <div id="btn">添加子節點</div>
        <div id="test">1111111</div>
        <script type="text/javascript">
            var oWrapper = document.getElementById("wrapper");
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oTest.addEventListener("DOMNodeInsertedIntoDocument",function(ev){
                ev = ev || event;
                this.style.backgroundColor = 'greenyellow';
            })
            
            oBtn.onclick = function(){
                oWrapper.appendChild(oTest);
            }
        </script>

特性節點變動

　　當特性被修改後，DOMAttrmodified 事件被觸發；該事件只有 firefox 和 IE8及以上瀏覽器支持；

        <div id="test" style="height: 50px; width: 100px;"></div>
        <div id="btn">特性節點測試</div>
        <script type="text/javascript">
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oTest.addEventListener("DOMAttrModified",function(ev){
                ev = ev || event;
                this.style.backgroundColor = 'greenyellow';
            })
            
            oBtn.onclick = function(){
                oTest.setAttribute('title','123');
            }
        </script>

文本節點變動

　　當文本節點的值發生變化時，觸發 DOMCharacterDataModified 事件；該方法只有 chrome/safari/opera 瀏覽器支持；

        <div id="test" style="height: 50px; width: 100px;">hello</div>
        <div id="btn">特性節點測試</div>
        <script type="text/javascript">
            var oTest = document.getElementById("test");
            var oBtn = document.getElementById("btn");
            
            oTest.addEventListener("DOMCharacterDataModified",function(ev){
                ev = ev || event;
                this.style.backgroundColor = 'greenyellow';
            })
            
            oBtn.onclick = function(){
                oTest.innerHTML = 'hello world';
            }
        </script>