How to add and remove the same class using pure Js? Add class on "mouseover" event, delete on "mousedown" event

How to add and remove the same class using pure Js? Add class on "mouseover" event, delete on "mousedown" event.

HTML

    <section class="preview">
        <div class="container">
            <div class="preview__wrapper">
                <div class="preview__text">
                    <h1>Navigating the digital landscape for success</h1>
                    <div class="preview__descrp">Our digital marketing agency helps businesses grow and succeed online through a range of services including SEO, PPC, social media marketing, and content creation.</div>
                    <button onmouseover="result(1)" onmousedown="result(1)"  class="btn btn_prev">Book a consultation</button> // event button!
                </div>
            </div>
        </div>
    </section>

SCSS

.btn{
    width: 231px;
    height: 68px;
    border-radius: 14px;
    border-color: #191A23;
    background-color: #fff;
    color: #000;
    font-size: 20px;
    padding: 0;
    &_prev{
        color: #fff;
        background-color: #191A23;
        width: 264px;
    }
    &_sh{
        box-shadow: 5px 5px darkgoldenrod;
    }
}

JS

let el = document.querySelectorAll('button');

function result(n){
    for (let i = 0; i < el.length; i++){
        el[n].onmouseover = el[n].onmousedown = changeButton;
        function changeButton(event){
            if(event.type =='mouseover'){
                for(let i = 0; i < el.length; i++){
                    if(!el[n].classList.contains('btn_sh')){
                        el[n].classList.add('btn_sh')
                    }
                }
            } 
            if(event.type == 'mousedown'){
                for(let i = 0; i < el.length; i++){
                    if(el[n].classList.contains('btn_sh')){
                        el[n].classList.remove('btn_sh')
                    }
                }   
            }
        }
    }
   
}