如何创建从类中引用方法的事件侦听器（鼠标单击）？

Question

Class Example:

$(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!');
        }
    }
});

I am still learning how to make connections between my HTML and my JavaScript, so I am trying to find ways of building good habits early on. I would like to understand the proper way of connecting a mouse-click event to calling (referencing?) a method from within a class.

I've tried relocating my .onclick event in a few spots throughout my code, from the global scope, to within methods, and now I have it sitting in my constructor for the class. Having it here works. I haven't explored the limitations of this, but is this an inappropriate way of creating an event listener that will reference a method within a class?

Answer 1

Nesting the EventListener within the EventListener which instantiates the object has allowed me to reference the method.

    $('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);
    });

Thank you to @ ADyson who has made this a little bit more clear.