JS - removeEventListener 不删除事件

Question

删除事件并没有真正删除它。我的猜测是因为 .bind，它在尝试删除函数时给它一个不同的函数地址，而不是在添加函数时。但是，我不知道如何为 removeEventListener 函数提供正确的地址。

document.querySelectorAll(".cell").forEach(function(cell, index){
    cell.style.filter = "blur(4px)";
    // Adding event
    cell.addEventListener("transitionend", cellFadeIn.bind(null, cell, index));
});
                                        
function cellFadeIn(cell, index){
    if (index == 1){
        document.getElementById("heading-wrap").style.transform = "rotate3d(1,0,0,0deg)"; 
    }
    cell.style.transition = ".75s";
    cell.style.filter = "blur(20px) saturate(110%)";
    // Removing event
    cell.removeEventListener("transitionend", cellFadeIn);
}

Answer 1

bind() 创建了一个新的不同的函数。您可以将绑定函数分配给临时变量，然后将其与 removeEventListener() 一起使用。

let bindedCellFadeIn;

document.querySelectorAll(".cell").forEach(function(cell, index){
    cell.style.filter = "blur(4px)";
    // Adding event
    cell.addEventListener("transitionend", bindedCellFadeIn = cellFadeIn.bind(null, cell, index));
});
                                        
function cellFadeIn(cell, index){
    if (index == 1){
        document.getElementById("heading-wrap").style.transform = "rotate3d(1,0,0,0deg)"; 
    }
    cell.style.transition = ".75s";
    cell.style.filter = "blur(20px) saturate(110%)";
    // Removing event
    cell.removeEventListener("transitionend", bindedCellFadeIn);
    bindedCellFadeIn = undefined;
}

Answer 2

一个简单的解决方案就是在 cell 中添加一个属性来存储索引，并在处理程序中使用 this ，就像通常不使用 bind()

document.querySelectorAll(".cell").forEach(function(cell, index){
    // add index to element itself
    cell.idx = index;

    cell.style.filter = "blur(4px)";
    // Adding event
    cell.addEventListener("transitionend", cellFadeIn);
});
                                        
function cellFadeIn(evt){
    if (this.idx == 1){
      // idx set above in forEach
        document.getElementById("heading-wrap").style.transform = "rotate3d(1,0,0,0deg)"; 
    }
    this.style.transition = ".75s";
    this.style.filter = "blur(20px) saturate(110%)";
    // Removing event
    this.removeEventListener("transitionend", cellFadeIn);
}

JS - removeEventListener 不删除事件

JS - removeEventListener not removing the event

javascript

events

event-handling

addeventlistener

removeeventlistener