'How can I let one element do two events at the same time

so, I'm having a game, and I want the user to reset the score when he clicks the button, and reset boundaries when he hovers over it. How can I do it so that he can both, hover and click

function reset_bounderies() {


    let start = document.getElementById("start")
    start.addEventListener("mouseover", function (event) {
        game = true;
        document.querySelectorAll(".boundary:not(.example)").forEach(item => {
            item.classList.remove("youlose")
            document.getElementById("status").innerHTML = `Begin by moving your mouse over the "S".`
        })
    })
    start();

}

and the second function

function reset_game() {

    let start = document.getElementById("start")
    start.addEventListener("click", function (event) {
        game = true;
        score = 0;
        print_score()
        
    })
    start();
}

P.S: I can't edit html or css file



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source