javascript function Слушатель событий DOM с использованием «this»

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

Проблема, как упоминалось ранее, заключается в том, что вы выполняете функцию, а не просто передаете ее в качестве аргумента. Взгляните на этот пример:

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

Давайте сохраним эту функцию в переменной и передадим ее в качестве аргумента.

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

См., Я просто передал функцию, хранящуюся в переменной, в качестве аргумента. Теперь вы выполняете функцию:

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

Вот почему это не работает.

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

Вы сразу же запускаете isTwoCards вместо того, чтобы назначать его в качестве обратного вызова. Из того, что я вижу, нужно назначить isTwoCards (а не его результат!) В качестве обратного вызова, то есть cardDiv.addEventListener('click', isTwoCards). Вы также должны использовать this.getAttribute('data-card') вместо element. this назначается элементу, когда функция запускается как обратный вызов, а не когда назначается обратный вызов.