正确的方式

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。

使用CORRECT 的方式确实是：

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

或

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

当触发事件时，this.scroll内的代码将this指向当前类（Sticky）实例。

删除事件侦听器

要删除该事件，请致电window.removeEventListener，但有一点需要注意：必须使用removeEventListener中使用的完全相同的参数调用addEventListener以删除侦听器。换句话说，为了能够删除你将不得不这样做：

// 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);

在Class里面的Javascript ES6 addEventListener

1 个答案:

正确的方式

删除事件侦听器