如何创建一个引用类中方法的事件侦听器(鼠标单击)



类示例:

$(document).ready(function(){
var $ = document.getElementById.bind(document);
class Farkle
{
constructor()
{
this.playerCount = 0;
this.failBit = 0;
this.playerName = [];
this.diceRoll = [];
this.frontEndDice = [
"img/Alea_1.png", "img/Alea_2.png", "img/Alea_3.png",
"img/Alea_4.png", "img/Alea_5.png", "img/Alea_6.png"
]
this.diceID = ["d0", "d1", "d2", "d3", "d4", "d5"]
$('rollButton').onclick = this.testMethod; // will this work?
}
testMethod()
{
console.log('I have access!');
}
}
});

我仍在学习如何在HTML和JavaScript之间建立联系,所以我正在努力寻找早期养成良好习惯的方法。我想了解将鼠标点击事件连接到调用(引用?(类中方法的正确方法。

我已经尝试在代码中的几个位置重新定位.onclick事件,从全局范围到方法内部,现在我已经将它放在了类的构造函数中。把它放在这里很管用。我还没有探究它的局限性,但这是否是一种不合适的创建事件侦听器的方式,该侦听器将引用类中的方法?

在实例化对象的EventListener中嵌套EventListener允许我引用该方法。

$('startButton').addEventListener('click', function(event) {
var fark = new Farkle();
console.log('fark is an instance of Farkle?', fark instanceof Farkle);
fark.setup();
$('rollButton').addEventListener("click",fark.testFunction);
});

感谢@ADyson,他把这件事说得更清楚了一点。

最新更新