如何实现非内联方式触发onmouseover与onmouseout事件

嘿，你的思路完全没问题——用addEventListener就是实现非内联事件绑定的正确方式！不过你的代码里有两个小细节出错了，导致事件没生效，我帮你修正一下：

错误点说明 #

• 事件名称多了on前缀：addEventListener的第一个参数是原生事件名，不需要加on前缀，应该用mouseover和mouseout，而不是onmouseover、onmouseout。
• 样式值里多了分号：给style.color赋值时，直接写颜色字符串即可，不需要加CSS语法里的分号，比如"blue;"要改成"blue"。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        #smallBox {
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="smallBox">测试内容</div>

    <script>
        // 先获取元素存成变量，避免重复查询DOM
        const smallBox = document.getElementById('smallBox');
        
        // 绑定mouseover事件
        smallBox.addEventListener("mouseover", function() {
            this.style.color = "blue";
        });
        
        // 绑定mouseout事件
        smallBox.addEventListener("mouseout", function() {
            this.style.color = "yellow";
        });
    </script>
</body>
</html>

额外优化小技巧 #

我把获取元素的操作提前存成了变量smallBox，而且在事件回调里用this指代当前触发事件的元素，这样不用重复调用getElementById，代码会更简洁高效～

内容的提问来源于stack exchange，提问作者Deke