深入理解DOM事件类型系列第三篇——变动事件

Posted 小火柴的蓝色理想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解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-浏览器

以上是关于深入理解DOM事件类型系列第三篇——变动事件的主要内容,如果未能解决你的问题,请参考以下文章

深入理解DOM事件类型系列第五篇——文本事件

深入理解表单脚本系列第三篇——选择文本

深入理解DOM事件类型系列第四篇——剪贴板事件

深入理解DOM事件类型系列第四篇——剪贴板事件

深入理解DOM节点类型第三篇——注释节点和文档类型节点

深入理解DOM事件机制系列第二篇——事件处理程序