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

您实际上是将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 = [];
    }
}

Answer 3

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

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

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

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

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

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

这就是为什么它不起作用。

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

3 个答案: