Javascript 事件侦听器在对象方法中不起作用

Javascript event listener don't work inside an object method

本文关键字：方法 不起作用 对象 事件 侦听器 Javascript      更新时间：2023-09-26

请考虑以下代码：

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，带括号它自动运行函数。

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

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

你可以改变

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。

相关文章：