類中的 Javascript ES6 addEventListener

Question

我正在學習 ES6，我不明白為什么我的 addEventListener 在我使用這樣的函數時不起作用（只觸發一次）：

// Trigger only one time
window.addEventListener("scroll", this.scroll() );

但是當我這樣做時：

// working !!
window.addEventListener("scroll", (e) => {
    let top = window.pageYOffset;

    console.log(top + " vs " + this.offsetTop)

    if (top >= this.offsetTop) {
        this.el.classList.add('is-sticky');
    } else {
        this.el.classList.remove('is-sticky');
    }

});

完整的代碼可以在這里找到： https ://codepen.io/paallaire/pen/GQLzmg/?editors=0010#0

Answer 1

該聲明：

window.addEventListener("scroll", this.scroll() );

將this.scroll()的結果綁定到事件，這是一個函數調用。 這樣的調用返回undefined ，因為scroll方法沒有return語句：

scroll() {
    let top = window.pageYOffset;
    console.log(top + " vs " + this.offsetTop);

    if (top >= this.offsetTop) {
        this.el.classList.add('is-sticky');
    } else {
        this.el.classList.remove('is-sticky');
    }
}

正確方法

不使用：

window.addEventListener("scroll", this.scroll);

上面的代碼將在事件觸發時將this綁定到window 。

正確的使用方法是：

window.addEventListener("scroll", (e) => {
   this.scroll();
});

要么

window.addEventListener("scroll", this.scroll.bind(this));

其中，當事件被觸發時， this.scroll中的代碼會將this指向當前類 ( Sticky ) 實例。

---

刪除事件偵聽器

要刪除事件，請調用window.removeEventListener ，但有一個警告：必須使用與addEventListener中使用的完全相同的參數調用removeEventListener以刪除偵聽器。 換句話說，要能夠刪除，您必須執行以下操作：

// save the function that will be bound to the event, so you can remove it later
this.scrollBoundFunction = this.scroll.bind(this);
window.addEventListener("scroll", this.scrollBoundFunction);

// and later
window.removeEventListener("scroll", this.scrollBoundFunction);