我們在開發(fā)中，會遇到一些需求，需要監(jiān)聽元素變化，比如元素屬性變化，元素大小變化，今天，我們就來聊聊倆種常用實現(xiàn)監(jiān)聽的方案，其他的自行研究
一、ResizeObserver
ResizeObserver 是來監(jiān)聽元素的大小位置發(fā)生變化，也可以說是回流(重排)時的變化
<div style="width: 100vw; height: 100vh; background-color: deepskyblue" id="bg">
然后，我們創(chuàng)建監(jiān)聽器，進行監(jiān)聽
// 觀察元素變化
let el = document.getElementById('bg')
// 創(chuàng)建監(jiān)聽器
let ob = new ResizeObserver(entries => {
for (let entry of entries) {
// 監(jiān)聽到的元素
console.log(entry)
}
})
// 監(jiān)聽尺寸變化
ob.observe(el)
隨之，拖動瀏覽器窗口，控制臺會打印，我們可以看到打印的日志，包含元素的大小信息
在使用完畢時，可以進行監(jiān)聽結(jié)束
ob.unobserve(el)
二、MutationObserver
MutationObserver 是用來監(jiān)聽DOM樹的修改，MutationObserver可以監(jiān)聽的屬性(配置)
| 屬性名 | 詳情 | 默認值 |
|---|---|---|
| attributes | 設(shè)為 true 以觀察受監(jiān)視元素的屬性值變更 | false |
| attributeFilter | 要監(jiān)視的特定屬性名稱的數(shù)組。如果未包含此屬性，則對所有屬性的更改都會觸發(fā)變動通知 | 無 |
| characterData | 設(shè)為 true 以監(jiān)視指定目標節(jié)點或子節(jié)點樹中節(jié)點所包含的字符數(shù)據(jù)的變化 | 無 |
| childList | 設(shè)為 true 以監(jiān)視目標節(jié)點（如果 subtree 為 true，則包含子孫節(jié)點）添加或刪除新的子節(jié)點 | false |
| subtree | 其他值也會作用于此子樹下的所有節(jié)點，而不僅僅只作用于目標節(jié)點 | false |
實現(xiàn)過程：文章來源：http://www.zghlxwxcb.cn/news/detail-605701.html
// 創(chuàng)建監(jiān)聽器
let ob = new MutationObserver(entries => {
console.log(entries)
})
// 監(jiān)聽元素變化
ob.observe(el, { attributes: true, subtree: true })
// 修改背景顏色
el.style.backgroundColor = 'red'
我們可以看到控制臺，打印日志，觸發(fā)更新：
取消監(jiān)聽：文章來源地址http://www.zghlxwxcb.cn/news/detail-605701.html
ob.disconnect()
到了這里，關(guān)于JS 監(jiān)聽元素dom變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
