Javascript, проблема с привязкой события к div-тегу

Question

Я пытаюсь связать событие с динамически созданным div.

function GameField(playerNumber) { 
this.fields = new Array(); 
this.player = playerNumber; 
this.isPlayerActive = false; 
this.currentRound = 0; 
} 

GameField.prototype.InitField = function(fieldNumber) { 
    var newField = document.createElement("div"); 
    if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17) 
     newField.className = 'gameCellSmall borderFull gameText gameTextAlign'; 
    else 
     newField.className = 'gameCellSmall borderWithoutTop gameText gameTextAlign'; 
    newField.onclick = function() { this.DivClick('a'); } 
    this.fields[fieldNumber] = newField; 
    return newField; 
} 

GameField.prototype.DivClick = function(fieldNumber) { 
    alert('Nummer: ' + fieldNumber); 
} 

Все отлично работает, но при нажатии на одну из созданных див, я в конечном итоге со следующим сообщением об ошибке: Ошибка: Объект не поддерживает это свойство или метод.

Если я заменить функцию OnClick с этим, то он работает:

newField.onclick = function() { alert('Nummer: ' + fieldNumber); } 

Как я могу получить событие OnClick, чтобы огнь моей функции DivClick вместо этого?

Answer 1

Проблема заключается в том, что обработчик события onclick выполняется с значением this, указывающим на элемент DOM, который вызвал событие, поэтому сбой выполнения this.DivClick.

Вам необходимо применять контекст для того, чтобы использовать методы экземпляра обработчика событий, например, вы можете сохранить ссылку на текущий экземпляр:

GameField.prototype.InitField = function(fieldNumber) { 
    var newField = document.createElement("div"); 
    //... 
    var instance = this; 
    newField.onclick = function() { instance.DivClick('a'); } 
    //... 
} 

Answer 2

Это путь

function DivClick (fieldNumber) { 
     alert('Nummer: ' + fieldNumber); 
    } 

{this.DivClick ('a'); } - следует заменить на {DivClick ('a'); }