构造函数 es6 类中的 addEventListener 在初始化时被触发，并且永远不会再次 [重复]答案

【问题标题】：addEventListener inside constructor es6 class get fired ones on init and never agian [duplicate]构造函数 es6 类中的 addEventListener 在初始化时被触发，并且永远不会再次 [重复]
【发布时间】：2018-06-27 22:22:26
【问题描述】：

我是 es6 类的新手，不能完全理解为什么以下行为会这样：

  let scrollElement = document.querySelector(".foo");
  scrollElement.addEventListener("scroll", logSomething());

  logSomething(){
    console.log("hi");
  }

每次滚动时都会在我的控制台中输出“hi”。这就是我要的。现在我尝试做同样的事情，但使用一个指定的类来对所有滚动行为进行分组：

   class scrollHelper{
        constructor(scrollElement){
            scrollElement.addEventListener("scroll", this.logSomething());
      }


      logSomething(){
        console.log("hi");
      }
   }


  let scrollElement = document.querySelector(".foo");

  new scrollHelper(scrollElement)

但不是每次滚动时都记录 hi，而是在创建类实例时记录“hi”，之后再也不记录。

有人可以告诉我为什么会发生这种情况以及我做错了什么以获得与第一个示例相同的结果。

问候，梅林

【问题讨论】：

它是scrollElement.addEventListener("scroll", this.logSomething);。你需要传递一个函数reference，而不是call函数。
因为没有这个功能。你必须调用你需要的方法。另请参阅 stackoverflow.com/questions/20279484/… 以了解将方法用作回调。

标签： javascript ecmascript-6 es6-class

【解决方案1】：

您不需要调用logSomething，您需要将其作为处理程序传递，以便在事件scroll 期间调用。

还要确保 div 甚至可以滚动。

class scrollHelper{
  constructor(scrollElement){
    scrollElement.addEventListener("scroll", this.logSomething);
  }


  logSomething(){
    console.log("hi");
  }
}


let scrollElement = document.querySelector(".foo");
console.log(scrollElement);

new scrollHelper(scrollElement)

.foo {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  background-color: red;
}

#tall {
  height: 600px;
}

<div class="foo">
  <div id="tall"></div>
</div>

【讨论】：

该死的愚蠢。非常感谢

【解决方案2】：

scrollElement.addEventListener("scroll", logSomething());

您正在立即调用该函数。您想改为传递引用。

scrollElement.addEventListener("scroll", logSomething);

注意缺少括号。

【讨论】：

我得到一个错误：Uncaught ReferenceError: logSomething is not defined。需要 this.logSomething 但确实如此。像魅力一样工作
我指的是您的第一个“伪”代码。如果您打算在 logSomething 方法中引用类实例，则需要绑定“this”或使用箭头函数，否则会遇到更多麻烦。我建议在堆栈溢出中搜索示例或阅读有关“this”的内容。