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

在点击事件中，它返回undefined，括号内自动运行函数。

为什么eventlistener会以这种方式运行？

P.S。我只是在学习Javascript，并试图编写灵活的代码。这是一个很好的做法，我正在做什么，还是我复杂的事情？

Answer 1

您可以更改

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

到

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

此代码可以工作：）

问题是，当您将this分配给this.toggleBar时，addEventListener上下文会丢失。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler。

Javascript事件侦听器在对象方法

1 个答案: