DOM中监听节点变化的事件(变动事件)的用法 — 第13.4.6节
2016-12-16 13:31
309 查看
DOM变动事件的用法
DOM2级的変动事件是为XML或html的DOM设计的,不特定于某种语言。一:变动事件的分类有7种,最常用的浏览器支持最多的有3种,下面黑体?
1. DOMSubtreeModified:在DOM结构中发生任何变化时触发;
2. DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时触发;
3. DOMNodeRemoved:在节点从其父节点中被移除时触发;
4. DOMNodeInsertedIntoDocument:在一个节点被直接插入文档中或者通过子树间接插入文档后触发。在DOMNodeInserted之后触发;
5. DOMNodeRemovedFromDocument:在一个节点被直接从文档中删除或通过子树间接从文档中移除之前触发。在DOMNodeRemoved之后触发。
6. DOMAttrModified:在特性被修改之后触发;
7. DOMCharacterDataModified:在文本节点的值发生变化的时候触发。
二:删除节点检测?
首先触发的是DOMNodeRemoved事件,它对应的event对象中的target属性值是被删除的节点,relatedNode属性值是被删除节点的父节点,该事件会冒泡;
其次出发的是DOMNodeRemovedFromDocument事件,它对应的event对象中的target属性值为指定的被删除的子节点。只有绑定到它的子节点上才能被触发。
最后触发的是DOMSubtreeModified事件。这个事件对应event对象中的target属性是被移除节点的父节点。
(下面注释的序号为触发的顺序:)
function getFirstChild(obj){ // 获取第一子节点(找到第一个不为空的节点) var first = obj.firstChild; while(first.nodeType != 1){ first = first.nextSibling; } return first; } EventUtil.addHandler(window,"load",function(event){ var list = document.getElementById('myList'); var btn = document.ge d6b2 tElementById("mbtn"); EventUtil.addHandler(document,"DOMNodeRemoved",function(event){ console.log(event.type); //1:DOMNodeRemoved console.log(event.target); //2:ul节点,即被删除的节点 console.log(event.relatedNode); //3:body节点,即被删除节点的父节点 }) EventUtil.addHandler(getFirstChild(list),"DOMNodeRemovedFromDocument",function(event){ console.log(event.type) //4:DOMNodeRemovedFromDocument console.log(event.target) //5:li节点,即<li>item1</li> }); EventUtil.addHandler(document,"DOMSubtreeModified",function(event){ console.log(event.type); //6:DOMSubtreeModified console.log(event.target); //7:body节点,即被删除节点的父节点 }) EventUtil.addHandler(btn,'click',function(event){ list.parentNode.removeChild(list); // }) })
三:插入节点检测?
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点的时候:
首先触发DOMInserted事件,它对应的event对象中的target属性为添加的节点,relateNode属性对应被添加节点的父节点。(可冒泡);
其次触发的是DOMNodeInsertedIntoDocument事件,它对应的event对象中的target属性是添加的节点,只有指定给一个子节点的事件处理程序才会被调用
最后出发的是DOMSubtreeModified事件,它对应的event对象长得target属性值是新节点的父节点。
代码如下所示:
function getFirstChild(obj){ // 获取第一子节点(找到第一个不为空的节点) var first = obj.firstChild; while(first.nodeType != 1){ first = first.nextSibling; } return first; } EventUtil.addHandler(window,"load",function(event){ var list = document.getElementById('myList'); var btn = document.getElementById("mbtn"); var item4 = document.createElement('li'); var item4Text = document.createTextNode('item4'); EventUtil.addHandler(document,"DOMNodeInserted",function(event){ console.log(event.type); //1:DOMNodeInserted console.log(event.target); //2:li节点,即被添加的节点 console.log(event.relatedNode); //3:ul节点,即被添加节点的父节点 }); EventUtil.addHandler(item4,"DOMNodeInsertedIntoDocument",function(event){ console.log(event.type); //4:DOMNodeInsertedIntoDocument console.log(event.target); //5:li节点,即被添加的节点<li>item4</li> }); EventUtil.addHandler(document,"DOMSubtreeModified",function(event){ console.log(event.type); //6:DOMSubtreeModified console.log(event.target); //7:ul节点,即被触发节点的父节点 }) EventUtil.addHandler(btn,'click',function(){ item4.appendChild(item4Text); getFirstChild list.replaceChild(item4,getFirstChild(list)); }); })
相关文章推荐
- 万恶的IE之动态添加DOM节点触发window.resize事件
- javascript dom 节点对象的原生事件和自定义事件
- 对 键盘 事件 监听NSNotification 处理相应页面 变化UIKeyboardAnimation
- 关于DOM事件模型中如何获得事件以及arguments[0]的用法
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
- Flex中通过监听ObjectProxy的propertyChange事件检测一个Object是否变化的例子
- 监听Hierachy、Project等视图结构变化的事件
- jquery 委托事件处理函数后,当DOM树变化后,绑定的事件会失效
- dom节点修改事件
- 用JS或者jQuery监听 浏览器窗口大小的变化事件
- 浅析dojo.connect的几种用法(一)——关联事件,不仅仅是DOM Event
- 黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)
- Js(DOM)动态添加节点和事件
- 在TreeView 控件上,如果双击任何一个节点的checkbox 只会收到一次After_Check事件 但是check属性变化两次(从false到true 再从true到false),请问该如何解决,谢谢!
- JS之 DOM事件监听的兼容性问题 IE 和 FF
- IE之动态添加DOM节点触发window.resize事件
- ext4【 监听事件 beforeload,用法】【grid 带参数 查询 分页 store beforeload 解决办法 】
- Spring 的监听事件 ApplicationListener 和 ApplicationEvent 用法
- js DOMNodeInserted,DOMNodeRemoved 和监听内容变化插件
- javascript 原生方法监听DOM结构改变事件