Question

当我尝试在 addEventListener 中使用 this 元素时，在以下javascript对象中的 setClickEvents 功能中，它没有＆＃t; t工作，我必须使用 tabUI ，对象本身。

我不确定这是一个很好的做法我做了什么，但它有效。

我可以做些什么来改善它？

var tabUI = {
    leftTab: undefined,
    rightTab: undefined,

    setTabs: function(leftTabId, rightTabId) {
        this.leftTab = document.getElementById(leftTabId);
        this.rightTab = document.getElementById(rightTabId);
    },

    setClickEvents: function() {
        this.leftTab.addEventListener('click', function() {
            // This works
            tabUI.leftTab.classList.add('tab_selected');
            tabUI.rightTab.classList.remove('tab_selected');

            // This doesn't work
            this.leftTab.classList.add('tab_selected');
            this.rightTab.classList.remove('tab_selected');
        });

        this.rightTab.addEventListener('click', function() {
            tabUI.leftTab.classList.remove('tab_selected');
            tabUI.rightTab.classList.add('tab_selected');
        });
    },
}

Answer 1

事件处理程序中的

this是发生事件的元素。

您可以使用以下两种方法之一解决问题。我建议您使用第二种方式，以便您可以访问发生事件的元素。

bind上下文

更改功能的上下文，无论其如何被调用。

bind()方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

＆＃13;

this.leftTab.addEventListener('click', function() {
  // This works
  tabUI.leftTab.classList.add('tab_selected');
  tabUI.rightTab.classList.remove('tab_selected');

  // This also works here
  this.leftTab.classList.add('tab_selected');
  this.rightTab.classList.remove('tab_selected');
}.bind(this));
// ^^^^^^^^^^

＆＃13;

缓存上下文/ this

缓存上一个上下文，然后可以在事件处理程序中使用。

＆＃13;

var that = this; // Cache this here
// ^^^^^^^^^^^^^

this.leftTab.addEventListener('click', function() {
  // This works
  tabUI.leftTab.classList.add('tab_selected');
  tabUI.rightTab.classList.remove('tab_selected');

  // That works here
  that.leftTab.classList.add('tab_selected');
  // ^^^
  that.rightTab.classList.remove('tab_selected');
  // ^^^
});

＆＃13;

Answer 2

this对象不是tabUI，您似乎已经注意到了。它是运行事件的元素：事件处理程序将其上下文设置为它们运行的元素。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

访问javascript对象的这个元素的正确方法是什么？

2 个答案: