![](/img/trans.png)
[英]Equivalent of DOMNodeInserted DOMNodeRemoved with MutationObserver?
[英]DOMNodeInserted and DOMNodeRemoved events
除了計數器,下面的代碼工作正常。 當我將一個項目添加到列表中時,計數器是准確的,盡管當我從列表中刪除一個項目時,它不會從計數器中減去一個項目。 有任何想法嗎?
HTML
<nav>
<div id ="counter">1</div>
<ul id="list">
<li class="test" id="liOne"><a href="#">test</a></li>
</ul>
<p id="contOne"></p>
<a id="button" class="button btn" href="#">Add</a><br>
<a id="button" class="button removeBtn" href="#">Remove</a>
</nav>
的JavaScript
var elList, addLink, newEl, netText, counter, listItems, removeLink, removeEl;
elList = document.getElementById('list');
addLink = document.querySelector('.btn');
counter = document.getElementById('counter');
removeLink = document.querySelector('.removeBtn');
function addItem(e) {
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; //IE fallback code
}
newEl = document.createElement('li');
newText = document.createTextNode('New List Item');
newAnchor = document.createElement('a');
newAnchor.setAttribute('href', '#');
newAnchor.appendChild(newText);
newEl.appendChild(newAnchor);
elList.appendChild(newEl);
}
function removeItem(e) {
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; //IE fallback code
}
var removeEl = document.querySelector('li');
var containEl = removeEl.parentNode;
containEl.removeChild(removeEl);
}
function updateCount() { // Declare function
listItems = elList.getElementsByTagName('li').length; // Get total of <li>s
counter.innerHTML = listItems; // Update counter
}
removeLink.addEventListener('click', removeItem, false);
addLink.addEventListener('click', addItem, false);
elList.addEventListener('DOMNodeInserted', updateCount, false); // DOM updated. fires when a node is inserted into dom tree
elList.addEventListener('DOMNodeRemoved', updateCount, false);
問題在於, updateCount()
函數的運行速度比removeItem()
函數的運行速度快(在刪除項目之前)。 我建議:
刪除以下行:
elList.addEventListener('DOMNodeInserted', updateCount, false);
elList.addEventListener('DOMNodeRemoved', updateCount, false);
並在addItem
和removeItem
方法的末尾調用updateCount()
,如下所示:
function removeItem(e) {
/* Your code here*/
updateCount();
}
編輯:請參閱工作JSFiddle示例
不推薦使用突變事件(有關W3C的更多詳細信息,請參見此處 )。 而是使用突變觀察器 。
DOM事件處理程序:
elList.addEventListener('DOMNodeInserted', updateCount, false);
elList.addEventListener('DOMNodeRemoved', updateCount, false);
將更改為以下內容。 請注意,這將觸發元素上所有DOM事件的updateCount
,但是可以將觀察者配置為處理特定事件。
var listObserver = new MutationObserver(updateCount);
listObserver.observe(elList, { attributes: true, childList: true, characterData: true });
下面是一個完整的可行示例。
var elList, addLink, newEl, netText, counter, listItems, removeLink, removeEl; elList = document.getElementById('list'); addLink = document.querySelector('.btn'); counter = document.getElementById('counter'); removeLink = document.querySelector('.removeBtn'); function addItem(e) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; //IE fallback code } newEl = document.createElement('li'); newText = document.createTextNode('New List Item'); newAnchor = document.createElement('a'); newAnchor.setAttribute('href', '#'); newAnchor.appendChild(newText); newEl.appendChild(newAnchor); elList.appendChild(newEl); } function removeItem(e) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; //IE fallback code } var removeEl = document.querySelector('li'); var containEl = removeEl.parentNode; containEl.removeChild(removeEl); } function updateCount() { // Declare function listItems = elList.getElementsByTagName('li').length; // Get total of <li>s counter.innerHTML = listItems; // Update counter } removeLink.addEventListener('click', removeItem, false); addLink.addEventListener('click', addItem, false); var listObserver = new MutationObserver(updateCount); listObserver.observe(elList, { attributes: true, childList: true, characterData: true });
<nav> <div id="counter">1</div> <ul id="list"> <li class="test" id="liOne"><a href="#">test</a> </li> </ul> <p id="contOne"></p> <a id="button" class="button btn" href="#">Add</a> <br> <a id="button" class="button removeBtn" href="#">Remove</a> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.