变动事件

来源：互联网发布：阿里云短信发送jar 编辑：程序博客网时间：2024/04/28 13:13

一：变动事件的分类有7种，最常用的浏览器支持最多的有3种
1. DOMSubtreeModified：在DOM结构中发生任何变化时触发；
2. DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发；
3. DOMNodeRemoved：在节点从其父节点中被移除时触发；
4. DOMNodeInsertedIntoDocument：在一个节点被直接插入文档中或者通过子树间接插入文档后触发。在DOMNodeInserted之后触发；
5. DOMNodeRemovedFromDocument：在一个节点被直接从文档中删除或通过子树间接从文档中移除之前触发。在DOMNodeRemoved之后触发。
6. DOMAttrModified：在特性被修改之后触发；

7. DOMCharacterDataModified：在文本节点的值发生变化的时候触发。

二：代码

var ellist,elnum,elnew,eltext,eladd;ellist = document.getElementById('list');elnum = document.getElementById('num');eladd = document.getElementById('add');function addlist(){elnew = document.createElement('li');eltext = document.createTextNode('新的列表');elnew.setAttribute("class","bg-info");elnew.appendChild(eltext);ellist.appendChild(elnew);}function updateCount() {                                   elnum.innerHTML = ellist.getElementsByTagName('li').length;                          }eladd.addEventListener('click',addlist,false);ellist.addEventListener('DOMNodeInserted', updateCount, false);

当插入新的列表，即将新的<li>节点插入<ul>节点时就会触发DOMNodeinseted事件。

需要注意的时必须要把eladd.addEventListener('click',addlist,false);写在在ellist.addEventListener('DOMNodeInserted', updateCount, false);前面。

如果写在后面则ellist.addEventListener('DOMNodeInserted', updateCount, false); 无效

点击打开链接，查看效果

0 0