How to chande css property, when mouse on the element?

) 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?