为什么我的悬停功能可以工作，但我的 onmouseleave 功能却不能？（在控制台调用该函数有效）

Question

这是我的代码笔：https://codepen.io/squishyboots19996/pen/BaoQjPL我正在尝试创建一个导航菜单，当您将鼠标悬停在箭头上时，该菜单会滑入，然后当鼠标离开菜单时会滑开。我有 UIController.showMenu 和 UIController.closeMenu。如果我在控制台中调用其中任何一个，它们就会按预期工作。但是 closeMenu 的事件侦听器不起作用。它只是没有检测到鼠标离开菜单并且没有关闭。如果我向函数添加 console.log("Hello") ，它将在页面首次加载时触发。但当我需要它时就不起作用了。应用程序.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();})导航栏.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%;}

Answer 1

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




Answer 2

添加事件时不应使用“on”，只需使用函数名称

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

代替

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