为什么我的 hover 功能有效，但我的 onmouseleave 功能无效？（调用控制台中的函数有效）

Question

这是我的代码笔：

https://codepen.io/squishyboots19996/pen/BaoQjPL

我正在尝试创建一个导航菜单，它会在您将鼠标悬停在箭头上时滑入，然后在您的鼠标离开菜单时滑出。

我有 UIController.showMenu 和 UIController.closeMenu。

如果我在控制台中调用它们中的任何一个，它们都会按预期工作。

但是，closeMenu 的事件侦听器不工作。它只是没有检测到鼠标离开菜单并且没有关闭。

如果我将 console.log("Hello") 添加到函数中，它将在页面首次加载时触发。但是当我需要它的时候不会工作。

app.js:

var Controller = (function() {
    UIController.updateNav;
    setInterval(UIController.moveArrowDown, 3000);
    //UIController.addBodyMargin();
 document.querySelector('#menuArrow').addEventListener("mouseover", UIController.openMenu);
      document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);
});
//-----------------------------------------------------------
var UIController = (function() {

    return {
        openMenu: (function(){
          document.getElementById('sideMenu').style.marginLeft = '0';
          document.getElementById('menuArrow').style.marginLeft = '250px';
          document.body.style.marginLeft = '25px'
        }),
        closeMenu: (function(){
          document.getElementById('sideMenu').style.marginLeft = '-250px';
          document.getElementById('menuArrow').style.marginLeft = '0';
          document.body.style.marginLeft = '0';
        })
        }

})();


document.addEventListener('DOMContentLoaded', (event) => {
  Controller();
})

navbar.css:

.sidemenu {
  height: 100vh;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 5001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: -250px;
  transition: .5s;
  cursor: pointer;
}

.sidemenu ul {
  list-style: none;
  padding: 0;
}

.sidemenu a {
  text-decoration: none;
  font-size: 2rem;
}

.expand-arrow {
  z-index: 4999;
  position: fixed;
  transition: .5s;
  bottom: 50%;
}

HTML:

<body>
        <div class="sidemenu" id="sideMenu">
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li><a>Questionnaire</a></li>
            </ul>
        </div>
        <i class="expand-arrow" id="menuArrow">SHOW MENU BUTTON ></i>

        <section class="child about-section" id="aboutSection">
            <div class="about-section__content">
                <div class="about-section__content__info-box">
                    <h1 class="about-section__content__info-box__header">About Us</h1>
                    <p class="about-section__content__info-box__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, soluta magni exercitationem consectetur natus assumenda dignissimos quasi porro non doloremque labore odit quae accusantium excepturi, dicta recusandae possimus. Necessitatibus, ipsam.
                        Esse dolorem porro quo velit odit quam, rerum, non optio, labore aliquam ducimus totam molestias ipsa quasi explicabo voluptates. Quas eius dolor harum optio corrupti quo impedit dolorem sunt porro?
                        Eaque officia vero, facere possimus exercitationem sint magnam aliquam veniam, ipsam soluta eveniet ex iusto perferendis blanditiis a repellendus assumenda dolores natus dolorum. Cumque vero deserunt fuga autem reprehenderit dignissimos.
                    </p>
                </div>
            </div>
        </section>

        <script src="app.js"></script>

</body>

Answer 1

使用addEventListener()方法时，是"mouseleave"而不是"onmouseleave"

Answer 2

you shouldn't use "on" while adding the event, just use the name of the function

document.querySelector('#sideMenu').addEventListener("mouseleave", UIController.closeMenu);

instead of

document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);

为什么我的 hover 功能有效，但我的 onmouseleave 功能无效？（调用控制台中的函数有效）

Why is my hover function working, but my onmouseleave function is not? (calling the function in the console works)

html

javascript

css

onmouseout

addeventlistener

为什么我的 hover 功能有效，但我的 onmouseleave 功能无效？ （调用控制台中的函数有效）

Why is my hover function working, but my onmouseleave function is not? (calling the function in the console works)

html

javascript

css

onmouseout

addeventlistener

为什么我的 hover 功能有效，但我的 onmouseleave 功能无效？（调用控制台中的函数有效）