深刻理解DOM事件類型系列第三篇——變更事件

前面的話

　　變更(mutation)事件能在DOM中的某一部分發生變化時給出提示，這類事件很是有用，但都只能使用DOM2級事件處理程序，且因爲瀏覽器兼容性很差，因此用的不普遍

 

刪除節點

　　刪除節點時，涉及到DOMNodeRemoved、DOMNodeRemovedFromDocument和DOMSubtreeModified這三個事件，下面將詳細介紹

DOMNodeRemoved

　　在使用removeChild()或replacechild()從DOM中刪除節點時，會觸發DOMNodeRemoved事件。而event.relatedNode屬性中包含着對目標節點父節點的引用。在這個事件觸發時，節點還沒有從其父節點刪除，所以其parentNode屬性仍然指向父節點。該事件會冒泡

　　[注意]IE8-瀏覽器不支持

<div id="box" style="height: 30px;width: 100px;">
    <div id="inBox">1</div>
</div>
<button id="btn">刪除子節點</button>
<script>
inBox.addEventListener('DOMNodeRemoved',function(e){
    e = e || event;
    e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
    box.removeChild(inBox);
}
</script>

DOMNodeRemovedFromDocument

　　若是被移除的節點包含子節點，那麼在其全部子節點以及這個被移除的節點上會相繼觸發DOMNodeRemovedFromDocument事件，這個事件不會冒泡，目標target指向被移除的節點

　　[注意]該事件只有chrome/safari/opera瀏覽器支持

<div id="box" style="height: 30px;width: 100px;">
    <div id="inBox">1</div>
</div>
<button id="btn">刪除子節點</button>
<script>
inBox.addEventListener('DOMNodeRemovedFromDocument',function(e){
    e = e || event;
    console.log(e.target.innerHTML)//1
});
btn.onclick = function(){
    box.removeChild(inBox);
}
</script>

DOMSubtreeModified

　　在DOM結構中發生任何變化時都會觸發DOMSubtreeModified事件，該事件在其餘任何事件觸發後都會觸發

　　該事件的目標是被移除節點的父節點

　　[注意]IE8-瀏覽器不支持

<div id="box" style="height: 30px;width: 100px;">
    <div id="inBox">1</div>
</div>
<button id="btn">刪除子節點</button>
<script>
box.addEventListener('DOMSubtreeModified',function(e){
    e = e || event;
    console.log(e.type)//DOMSubtreeModified
});
btn.onclick = function(){
    box.removeChild(inBox);
}
</script>

順序

　　刪除節點時，事件觸發的前後順序是DOMNodeRemoved事件、DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件

<div id="box" style="height: 30px;width: 100px;">
    <div id="inBox">1</div>
</div>
<div id="result"></div>
<button id="btn">刪除子節點</button>
<script>
inBox.addEventListener('DOMNodeRemoved',handler);
box.addEventListener('DOMSubtreeModified',handler);
inBox.addEventListener('DOMNodeRemovedFromDocument',handler);
function handler(e){
    e = e || event;
    result.innerHTML += e.type + ';';
}
btn.onclick = function(){
    box.removeChild(inBox);
}
</script>

插入節點

　　插入節點時涉及到DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件及DOMSubtreeModified事件，下面將詳細介紹

DOMNodeInserted

　　在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節點時，首先觸發DOMNodeInserted事件

　　這個事件的目標是被插入的節點，而event.relatedNode屬性中包含一個對父節點的引用

　　在這個事件觸發時，節點已經被插入到了新的父節點中。這個事件是冒泡的，所以能夠在DOM的各個層次上處理它

　　[注意]IE8-瀏覽器不支持

<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn">插入節點</button>
<script>
box.addEventListener('DOMNodeInserted',function(e){
    e = e || event;
    e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
    document.body.appendChild(box);
}
</script>

DOMNodeInsertedIntoDocument

　　在新插入的節點上面會觸發DOMNodeInsertedIntoDocument事件。這個事件不冒泡，所以必須在插入節點以前爲它添加這個事件處理程序。這個事件的目標是被插入的節點

　　[注意]該事件只有chrome/safari/opera瀏覽器支持

<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn">插入節點</button>
<script>
box.addEventListener('DOMNodeInsertedIntoDocument',function(e){
    e = e || event;
    box.style.background = 'lightblue';
});
btn.onclick = function(){
    document.body.appendChild(box);
}
</script>

順序

　　插入節點時，事件觸發的前後順序是DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件和DOMSubtreeModified事件　

<div id="box" style="height: 30px;width: 100px;">
</div>
<div id="outer"></div>
<div id="result"></div>
<button id="btn">插入子節點</button>
<script>
box.addEventListener('DOMNodeInserted',handler);
outer.addEventListener('DOMSubtreeModified',handler);
box.addEventListener('DOMNodeInsertedIntoDocument',handler);
function handler(e){
    e = e || event;
    result.innerHTML += e.type + ';';
}
btn.onclick = function(){
    outer.appendChild(box);
}
</script>

特性節點

DOMAttrmodified

　　當特性被修改後，DOMAttrmodified事件被觸發

　　[注意]該事件只有firefox和IE8+瀏覽器支持

<div id="box" title="123" style="height: 30px;width: 100px;"></div>
<button id="btn">修改特性</button>
<script>
box.addEventListener('DOMAttrModified',handler);
function handler(e){
    e = e || event;
    box.innerHTML = e.type;
}
btn.onclick = function(){
    box.setAttribute('title','abc');
}
</script>

 

文本節點

DOMCharacterDataModified

　　當文本節點的值發生變化時，觸發DOMCharacterDataModified事件

　　[注意]該方法只有chrome/safari/opera瀏覽器支持

<div id="box"  style="height: 30px;width: 100px;">abc</div>
<button id="btn">修改文本</button>
<script>
box.addEventListener('DOMCharacterDataModified',handler);
function handler(e){
    e = e || event;
    console.log(e)
    box.style.background = 'pink';
}
btn.onclick = function(){
    box.innerHTML = '123';
}
</script>

最後

　　上面7個變更事件，瀏覽器兼容性都不是太好。惟三過得去就是DOMNodeInserted、DOMNodeRemoved和DOMSubtreeModified這三個事件，不兼容IE8-瀏覽器