元素增刪事件DOMNodeInserted和DOMNodeRemoved

時間 2019-11-05

標籤元素增刪事件 domnodeinserted domnoderemoved 简体版

原文原文鏈接

監聽元素變化的三種方法：html

對於表單類型的控件，使用onchange事件最好。
使用DOMNodeInserted和DOMNodeRemoved事件
使用定時器定時檢測（下策）

有時須要給一個class類型的對象綁定某個事件，對於之後新插入的class類型的元素也要綁定這樣的事件。jQuery中很好的實現了這一功能。實際上，只須要DOMNodeInserted和DOMNodeRemoved兩個事件就能夠監聽元素增刪，從而能夠在增刪元素以前，爲元素綁定事件。node

DOMNodeInserted和DOMNodeRemoved兩個事件所對應的方法是瀏覽器自動執行的，執行時機爲真正增刪元素以前。瀏覽器

其它的DOM mutation事件：app

DOMAttrModified
DOMAttributeNameChanged
DOMCharacterDataModified
DOMElementNameChanged
DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified

詳情參考MDNide

經過如下demo，操做並查看日誌能夠更好的理解這兩個事件。
demo解釋：有三個按鈕，第一個按鈕經過更改innerHTML來添加元素，第二個按鈕經過建立元素並插入的方式來添加元素，第三個按鈕用於刪掉最後一個元素觸發DOMNodeRemoved事件。
若是經過innerHTML添加元素，會首先觸發不少次刪除元素的操做，這樣會有較大的建立、銷燬對象開銷，所以對於少許更改，儘可能少用innerHTML而是用建立元素的方式。對於大量更改，使用innerHTML更合理。ui

<html>

<body>
    <div id="main">
        <button onclick="addOne()">add one by html</button>
        <button onclick="add()">add one by element</button>
        <button onclick="removeOne()">remove one by element</button>
        </main>
</body>
<script>
    var main = document.querySelector("#main")
    function addOne() {
        console.log("add node by html")
        main.innerHTML += "<p>haha</p>";
        console.log("added node")
    }
    function add() {
        console.log("adding node by element")
        var ele = document.createElement('p')
        ele.innerHTML = "haha"
        main.appendChild(ele)
        console.log("added node")
    }
    function removeOne() {
        var sons = main.children
        var removing = sons[sons.length - 1]
        console.log("removing " + removing.tagName)
        if (removing.tagName.toLowerCase() == 'button') {
            alert("別再remove了！")
            return
        }
        main.removeChild(removing)
        console.log("child removed")
    }
    document.body.addEventListener("DOMNodeInserted", function () {
        console.log('DOMNode inserted')
        console.log(arguments)
    })
    document.body.addEventListener("DOMNodeRemoved", function () {
        console.log("DOMNode removed")
        console.log(arguments)
    })
</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。