判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument
在firefox, webkit中我们可以使用DOMNodeInsertedIntoDocument事件,但这个事件很快变废弃了,虽然浏览器还是很有节操地支持它们,但哪一天不在也很难说。比如说firefox22已经不支持了,IE则始终不支持此事件。
这里有个脚本,可以判定浏览器是否支持变动事件
var mutations = ( function (document) { // (C) WebReflection - Mit Style License var type = [ "DOMSubtreeModified" , "DOMNodeInserted" , "DOMNodeRemoved" , "DOMNodeRemovedFromDocument" , "DOMNodeInsertedIntoDocument" , "DOMAttrModified" , "DOMCharacterDataModified" ], documentElement = document.documentElement, method = "EventListener" , data = "deleteData" , p = document.createElement( "p" ), mutations = {}, i ; function check(addOrRemove) { for (i = type.length; i--;) { p[addOrRemove](type[i], cb, false ); documentElement[addOrRemove](type[i], cb, false ); } } function cb(e) { mutations[e.type] = true ; } check( "add" + method); documentElement.insertBefore( p, documentElement.lastChild ); p.setAttribute( "i" , i); p = p.appendChild(document.createTextNode(i)); data in p && p[data](0, 1); documentElement.removeChild(p = p.parentNode); check( "remove" + method); return (p = mutations); }(document)); |
在《Detect DOM Node Insertions with JavaScript and CSS Animations》这篇文章中,作者提供了一个方法,教我们利用keyframe CSS3开始动画事件来监听节点的插入。
<style> /* set up the keyframes */ @keyframes nodeInserted { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } } #parentElement > li { padding: 10px; background: #FF6A6A; margin-bottom: 10px; animation-duration: 0.001s; -o-animation-duration: 0.001s; -ms-animation-duration: 0.001s; -moz-animation-duration: 0.001s; -webkit-animation-duration: 0.001s; animation-name: nodeInserted; -o-animation-name: nodeInserted; -ms-animation-name: nodeInserted; -moz-animation-name: nodeInserted; -webkit-animation-name: nodeInserted; } </style> <script> window.onload = function () { var count = 0, insertListener = function (event){ console.warn( "Another node has been inserted! " , event); if (event.animationName == "nodeInserted" ) { event.target.textContent = "Element " + count++ + " has been injected!" ; } } document.addEventListener( "animationstart" , insertListener, false ); // standard + firefox document.addEventListener( "MSAnimationStart" , insertListener, false ); // IE document.addEventListener( "webkitAnimationStart" , insertListener, false ); // Chrome + Safari // Insert a new element setInterval( function (){ document.getElementById( "parentElement" ).appendChild(document.createElement( "li" )) }, 2000); }; </script> <ul id= "parentElement" ></ul> |
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
posted on 2013-07-15 21:24 司徒正美 阅读(5079) 评论(1) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步