即使刪除了元素，事件監聽器也會多次觸發？

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)