DOMNodeInserted and DOMNodeRemoved events

DOMNodeInserted and DOMNodeRemoved events

本文关键字：events DOMNodeRemoved and DOMNodeInserted      更新时间：2023-09-26

除了计数器之外，下面的代码运行良好。当我将一个项目添加到列表中时，计数器是准确的，尽管当我从列表中删除一个项目时，它不会从计数器中减去一。有什么想法吗？

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);

突变事件已被弃用（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>

问题是updateCount()函数比removeItem()函数运行得更快（在移除项之前）。我建议：

删除以下行：

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

并将您的updateCount()称为addItem和removeItem方法的末尾，如下所示：

function removeItem(e) {
    /* Your code here*/
    updateCount();
}

编辑：请参阅工作JSFiddle示例

相关文章：