jacascript DOM变动事件

Posted 2020-10-05 学习的时候不说话

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

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>