Javascript 事件侦听器不能在对象方法中工作

Question

考虑这段代码：

function Elements() {
    this.mainSection = document.querySelector('.main-section');
    this.searchBtn = document.getElementById('search');
    this.searchBar = document.querySelector('.search-bar');
    ...
  }

  var initiate = new Elements();

  initiate.toggleBar = function() {
    console.log(this.mainSection);
  }

  initiate.addClick = function() {
    this.searchBtn.addEventListener('click', this.toggleBar );
  }

  initiate.addClick();

在单击事件时 returns undefined，带括号的它会自动运行函数。

为什么事件监听器会这样？

P.S。我只是在学习 Javascript，并尝试编写灵活的代码。这是我正在做的一个好习惯，还是我把事情复杂化了？

Answer 1

你可以改变

this.searchBtn.addEventListener('click', this.toggleBar );

到

this.searchBtn.addEventListener('click', this.toggleBar.bind(this));

使此代码有效:)

问题是，当您将函数 this.toggleBar 分配给 addEventListener 时，this 上下文丢失了。详情请参考https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler。

Javascript 事件侦听器不能在对象方法中工作

Javascript event listener don't work inside an object method

javascript

addeventlistener

javascript-objects