<script> let box = document.querySelector('#box'); let select = document.querySelector('.select'); let choiced = new Array(0, 0, 0, 0); for (let i = 0; i < box.children.length - 1; i++) { let child = box.children[i].querySelectorAll('dd'); for (let j = 0; j < child.length; j++) { child[j].addEventListener('click', function(e) { if (choiced[i] == 0) { let dd = document.createElement('dd'); dd.innerHTML = `<dd>${e.target.text}<span>X</span></dd>`; e.target.style.color = 'red'; select.appendChild(dd); } choiced[i] = 1; let del = document.querySelectorAll('span'); for (let k = 0; k < del.length; k++) { del[k].addEventListener('click', function(e) { select.removeChild(select.children[k + 1]); e.target.style.color = ''; choiced[i] = 0; }) } }) } } </script>为什么在触发这个事件时会同时触发多次呢

这段代码中有多个事件监听器，其中包含了嵌套的循环。在每次点击事件中，会执行外层循环和内层循环，因此会多次绑定事件监听器，导致同一个元素被绑定了多个重复的事件监听器，从而导致多次触发。为了避免这种情况，可以考虑将内层循环的事件监听器提取到外层循环之外。同时，建议使用事件委托，将事件监听器绑定到父元素上，以便统一管理和处理。