-
原有的div的监听：使用document.querySelectorAll(‘div’)获取 -
新增div的监听：使用mutationObserver对document.body进行监听，默认情况下，MutationObserver将观察的范围限定为一个元素以及子节点的变化。可以把观察的范围扩展到这个元素的子树（所有后代节点），这需要在MutationObserverInit对象中将subtree属性设置为true。
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
width: 100vw;
height: 100vh;
background-color: red;
position: relative;
}
.inner {
background-color: blue;
position: absolute;
left: 300px;
top: 300px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="outer">
外部节点
<div class="inner">
内部节点
</div>
</div>
<script lang="text/javascript">
function jianting(el) {
el.addEventListener('click', (e) => {
e.stopPropagation()
console.log(el, Date.now())
})
}
let divs = document.querySelectorAll('div')
for (let div of divs) {
jianting(div)
}
let observer = new MutationObserver( (mutationRecords) => {
for (let mr of mutationRecords) {
for (let el of mr.addedNodes) {
if (el.nodeName === 'DIV') {
jianting(el)
}
}
}
})
observer.observe(document.body, {childList:true, subtree: true})
for (let div of divs) {
const newDiv = document.createElement('div')
newDiv.style.background = 'green'
newDiv.style.width = '50px'
newDiv.style.height = '50px'
newDiv.style.position = 'absolute'
newDiv.style.left = '50px'
div.appendChild(newDiv)
break
}
setTimeout(() => {
const newDiv = document.createElement('div')
newDiv.style.background = 'yellow'
newDiv.style.width = '200px'
newDiv.style.height = '200px'
newDiv.style.position = 'absolute'
newDiv.style.left = '500px'
document.body.appendChild(newDiv)
}, 2000)
</script>
</body>
</html>
|