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

javascript function DOM event listener using "this"

本文关键字：quot this 函数 DOM 事件 监听器 javascript      更新时间：2023-09-26

我希望我的事件侦听器函数isTwoCards从调用它的对象中获取信息。这段代码给了我元素。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()

您立即运行isTwoCards，而不是将其分配为回调。从我所看到的，你需要的是分配isTwoCards(而不是它的结果!)作为回调-即cardDiv.addEventListener('click', isTwoCards)。您还应该使用this.getAttribute('data-card')而不是element。当函数作为回调函数被触发时，this被赋值给元素，而不是当回调函数被赋值时。

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

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

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

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

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

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

您实际上将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 = [];
    }
}
相关文章：