即使在元素被删除后，事件侦听器也会多次触发

Multiple firings of event listener even after element has been removed?

本文关键字：侦听器 事件 元素 删除      更新时间：2023-09-26

我使用这段代码在元素的CSS转换完成后从DOM中删除元素。

elem.addEventListener('transitionend',function(e) {
    this.parentNode.removeChild(this);
}, false);

但是，由于转换会影响两个属性opacity 1->0，height 20px->0，因此事件会激发两次，第二次激发时会出现错误（因为此时元素已从DOM中删除）。

我试着测试了这处房产（如图所示：https://stackoverflow.com/a/18689069/1058739)，但很明显，该测试反而失败了。

当然，当一个元素从DOM中删除时，所有附加到它的事件侦听器也应该被删除吗？

我错过了什么把戏？

感谢

为什么从DOM中分离元素会删除所有事件处理程序？元素仍然存在，只是不在DOM中。想象一下，试图将一个元素从一个父元素移动到另一个

element.parentElement.removeChild(element)
newParent.appendChild(element)

你真的认为分离所有事件处理程序是个好主意吗？

话虽如此，你可以通过两种方式解决你的问题。

检查元素是否有父

elem.addEventListener('transitionend', function(e) {
    if (this.parentNode) {
        this.parentNode.removeChild(this);
    }
}, false);

或

分离事件侦听器

var onTransitionEnded = function (e) {
    this.parentNode.removeChild(this);
    this.removeEventListener('transitionend', onTransitionEnded);
}
elem.addEventListener('transitionend', onTransitionEnded)
相关文章：