当DOMNodeInserted事件为fire-upadateCount函数按预期工作时，但当DOMNodeRemove

Question

HTML

这里是HTML中的左键和右键，用于分别删除列表项和添加列表项。

<div id="groceries">
<h1>Buy Groceries<span id="counter">0</span></h1>
<ul id="list"></ul>
<div class="left button"><a  id ="lLink" href="">REMOVELISTITEM</a></div>     
<div class="right button"><a  id ="rLink" href="">ADDLISTITEM</a></div>

<div class="clear"></div>
</div>

java脚本

当点击事件在这个<div class="button left"><a id ="lLink" href="">REMOVELISTITEM</a></div>和这个<div class="button right"><a id ="rLink" href="">ADDLISTITEM</a></div>按钮上激发时，列表项被删除或添加到列表中，因为突变事件激发

Elist.addEventListener('DOMNodeInserted',updateCount,false);
Elist.addEventListener('DOMNodeRemoved',updateCount,false);

其针对相同的"；updateCount"；功能，但当"；DOMNodeInserted"；事件触发时，它计算正确数量的列表项；DOMModermemoved"；事件火灾原因？

function addListItem(e){
e.preventDefault();
newListnode = document.createElement('li');
textNode = document.createTextNode("new list item");
newListnode.appendChild(textNode);
Elist.appendChild(newListnode);
}
function removeListItem(e){
e.preventDefault();
Elist.removeChild(Elist.lastElementChild);
}
function updateCount(e){

var numOfItems = Elist.getElementsByTagName('li').length;
Ecounter.innerHTML = numOfItems;
}
ElLink.addEventListener('click',removeListItem,false);
ErLink.addEventListener('click',addListItem,false);
Elist.addEventListener('DOMNodeInserted',updateCount,false);
Elist.addEventListener('DOMNodeRemoved',updateCount,false);

Answer 1

向DOM添加或从DOM中删除项可能需要一点时间，因此不会立即得到结果。考虑到这一点，您应该等待DOM更新，然后再执行您的工作。放置一个简单的setTimeout()将使您的代码在eventCycle中处于较低的顺序，并且可以解决您的问题。

顺便说一句，这不是最好的方法，但是，你可以了解正在发生的事情，并使用更先进或优化的方法来解决

var Elist = document.getElementById('list');
var ElLink = document.getElementById('lLink');
var ErLink = document.getElementById('rLink');
var Ecounter = document.getElementById('counter');
function addListItem(e) {
e.preventDefault();
newListnode = document.createElement('li');
textNode = document.createTextNode("new list item");
newListnode.appendChild(textNode);
Elist.appendChild(newListnode);
}
function removeListItem(e) {
e.preventDefault();
Elist.removeChild(Elist.lastElementChild);
}
function updateCount(e) {
setTimeout(function() {
var numOfItems = Elist.getElementsByTagName('li').length;
Ecounter.innerHTML = numOfItems;
}, 0);
}
ElLink.addEventListener('click', removeListItem, false);
ErLink.addEventListener('click', addListItem, false);
Elist.addEventListener('DOMNodeInserted', updateCount, false);
Elist.addEventListener('DOMNodeRemoved', updateCount, true);

<div id="groceries">
<h1>Buy Groceries<span id="counter">0</span></h1>
<ul id="list"></ul>
<div class="left button"><a id="lLink" href="">REMOVELISTITEM</a></div>
<div class="right button"><a id="rLink" href="">ADDLISTITEM</a></div>
<div class="clear"></div>
</div>