即使在元素被删除后多次触发事件监听器？

Question

我正在使用这段代码在其 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 中移除时，所有附加到它的事件监听器肯定也应该被移除吗？

我在这里缺少什么技巧？

谢谢

Answer 1

为什么从 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)