使用“this”的javascript函数DOM事件监听器

Question

我希望我的事件侦听器函数 isTwoCards 从调用它的对象中获取信息。这段代码给了我 element.getAttribute 不是函数

var gameboard = document.getElementById('game-board');
var cards = ['queen', 'queen', 'king', 'king'];
var cardsInPlay = [];

var isTwoCards = function(element){
    cardsInPlay.push(element.getAttribute('data-card'));
    if (cardsInPlay.length === 2){
        isMatch(cardsInPlay);
        cardsInPlay = [];
    }
}
var createBoard = function(){
    for (var i = 0; i < cards.length; i++){
        cardDiv = document.createElement('div');
        cardDiv.setAttribute('class', 'card');
        cardDiv.setAttribute('data-card', cards[i]);
        cardDiv.setAttribute('id', i);
        cardDiv.addEventListener('click', isTwoCards(this));
        gameboard.appendChild(cardDiv);
    }
}
createBoard()

Answer 1

您立即运行isTwoCards，而不是将其分配为回调。据我所知，您需要分配isTwoCards（而不是其结果！）作为回调 - 即cardDiv.addEventListener('click', isTwoCards)。您还应该使用this.getAttribute('data-card') 而不是element。 this 在函数作为回调触发时分配给元素，而不是在分配回调时。

Answer 2

前面提到的问题是您正在执行函数，而不仅仅是将其作为参数传递。看看这个例子：

someDomElement.addEventListener('click', function() { })

让我们将该函数存储在一个变量中，然后将其作为参数传递。

const myFunction = function() { }
someDomElement.addEventListener('click', myFunction)

看，我只是将存储在变量中的函数作为参数传递。现在你正在做的是执行函数：

const myFunction = function() { }
someDomElement.addEventListener('click', myFunction())

这就是它不起作用的原因。

Answer 3

您实际上将undefined 附加为侦听器，因为它正在执行函数并且其返回值为undefined。

你可以通过创建一个闭包/简单地返回一个新函数来解决这个问题：

var isTwoCards = function(element){
  return function () {
    cardsInPlay.push(element.getAttribute('data-card'));
    if (cardsInPlay.length === 2){
        isMatch(cardsInPlay);
        cardsInPlay = [];
    }
  };
}

你也可以简单地在监听器内部访问this来访问事件监听器绑定的元素：

var isTwoCards = function(){
    var element = this;
    cardsInPlay.push(element.getAttribute('data-card'));
    if (cardsInPlay.length === 2){
        isMatch(cardsInPlay);
        cardsInPlay = [];
    }
}