事件侦听器在添加/删除列表中的某些元素后被删除
我有一个包含一些<ul>元素的<li>列表，并为每个元素添加了一个click事件侦听器，以便将单击的项移动到列表的顶部。
function add_event_listeners() {
let elements = my_list.getElementsByTagName('li');
for (let item of elements) {
item.addEventListener("click", send_to_top);
}
}
function send_to_top() {
this.parentElement.children[0].insertAdjacentElement('beforebegin', this);
}这个代码可以正常工作，直到我将一个新的li删除或添加到列表中，所有的事件侦听器都被删除，之后的单击也无法工作。
使用什么适当的事件侦听器来检测一个新元素已被添加或从列表中删除？这样我就可以用它来运行add_event_listeners()函数了吗？
基于MDN上的HTMLCollection文档：
HTML中的
HTMLCollection是活动的；当基础文档被更改时，它会自动更新。由于这个原因，复制一份是个好主意。使用Array.from)迭代如果添加、移动或移除节点。
有人能帮我拿一个代码示例来说明如何做到这一点吗？
回答 3
Stack Overflow用户
发布于 2022-06-09 05:42:07
我避免使用MutationObserver来捕获列表中的HTML中的任何更改，因为我认为这将是复杂的和性能消耗的。
我能够使用以下代码来管理：
const observer = new MutationObserver( () => authors_list__add_listeners() );
observer.observe(my_list, { childList: true });Stack Overflow用户
发布于 2022-06-08 20:09:22
在某种程度上，我的工作方式是重构代码，请参见下面的代码：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists">
<li class="list-item">
<div>List #1</div>
<button class="btn-send-up">Send to top</button>
</li>
<li class="list-item">
<div>List #2</div>
<button class="btn-send-up">Send to top</button>
</li>
<li class="list-item">
<div>List #3</div>
<button class="btn-send-up">Send to top</button>
</li>
<li class="list-item">
<div>List #4</div>
<button class="btn-send-up">Send to top</button>
</li>
</ul>
<script>
const listsEl = document.getElementById('lists');
const addEventListeners = () => {
const sendUpBtnEls = document.querySelectorAll('.btn-send-up');
sendUpBtnEls.forEach((sendUpBtnEl) => {
sendUpBtnEl.addEventListener('click', (e) => {
const listItemEl = e.target.closest('.list-item');
listsEl.firstElementChild.insertAdjacentElement(
'beforebegin',
listItemEl,
);
});
});
};
addEventListeners();
</script>
</body>
</html>Stack Overflow用户
发布于 2022-11-13 20:01:16
为了这个问题的未来观众的利益：
你是用.innerHTML +=来添加新的东西吗？
在发表这篇评论时(2022年11月)，破坏现有事件侦听器(即使是无关元素)的罪魁祸首似乎是
.innerHTML +=
所以试着用另一种方法。
例如，避免：
HTML插入技术1(它插入HTML，但无意中似乎删除了其他无关元素上的任何现有事件侦听器，因此不建议这样做)：
document.body.innerHTML += '<div id="something"</div>';
相反，使用以下方法(或其他一些技术)：
技术2(它有效且不影响现有的事件侦听器)：
document.body.insertAdjacentHTML( 'beforeend','<div id="something"</div>');
...or任何其他方式(例如使用append等等)。
https://stackoverflow.com/questions/72554580
复制相似问题
添加后如何删除事件侦听器
仅在移动设备上被"removeEventListener“删除后，无法添加事件侦听器
删除元素中的事件侦听器
添加/删除事件侦听器-
在删除元素之前是否需要删除事件侦听器？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
