javascript - 即使元素被删除后也会多次触发事件监听器？

Question

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

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

但是由于过渡影响两个属性不透明度 1 -> 0、高度 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)