I have a code for changing CSS class of button on web-site:

window.onload = function(){
    

    var button = document.getElementById("button");

    button.addEventListener("mouseenter", function(){
        button.classList.add("buttonclass1");
    });
    button.addEventListener("mouseleave", function(){
        button.classList.add("bnative1");
    })
}

I want to make like this:
 


if(mouseenter){
  button.addEventListener("mouseenter", function(){
            button.classList.add("buttonclass1");
        });
}
else{
  button.addEventListener("mouseleave", function(){
        button.classList.add("bnative1");

}

But it doesn't work, by changing this class I want to achieve changing color. It changes, when mouse on the button, but not changed back, when it out fo te button. How can I achieve it by using JS?