onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
| 属性 | 描述 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
文档内容来自菜鸟教程
以下列嵌套容器为例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.external {width: 600px;height: 600px;background-color: red;margin: 0 auto;}.interval {width: 300px;height: 300px;background-color: black;}</style>
</head>
<body>
<div class="external"><div class="interval"></div>
</div><script type="text/javascript">let external = document.getElementsByClassName('external')[0]external.onmouseenter = function () {console.log('父-enter')}external.onmouseleave = function () {console.log('父-leave')}external.onmouseout = function () {console.log('父-out')}external.onmouseover = function () {console.log('父-over')}
</script>
</body>
</html>
所有事件都绑定到父元素中，它们之间的关系为：
- onmouseenter、onmouseleave：鼠标只有在父元素与外界之间移入移出才会触发。即当第一次从外界移入父元素时触发onmouseenter事件，接着再移入子元素时不触发；从子元素中移除到父元素时也不触发onmouseleave事件，直到移出父元素到达外界才触发。
- onmouseover、onmouseout：鼠标在父元素和子元素中都会触发。
图例：
根据这几个事件的特性，可实现以下功能，如图所示：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style type="text/css">.external {width: 600px;height: auto;background-color: red;margin: 0 auto;}.external1 {background-color: #003cff;}.btn {float: right;margin: 10px;visibility: hidden;}.btn1 {visibility: visible;}.btn2 {background-color: #28c121;}.clear {clear: both;}</style>
</head>
<body>
<div class="external"><button type="button" class="btn">按钮</button><div class="clear"></div>
</div><script type="text/javascript">/*** 添加样式类名* @param obj 目标元素* @param cn 指定的样式类*/function addClass (obj, cn) {// 先判断是否含有该样式类，有则加进去，没有则不加if(!hasClass(obj, cn)){obj.className += ' ' + cn}}/*** 判断是否含有指定的样式类* @param obj 目标元素* @param cn 指定的样式类* @returns {boolean} true表示有；false表示没有；*/function hasClass (obj, cn) {// 定义正则表达式const reg = new RegExp("\\b" + cn + "\\b")// 判断是否含有传进来的样式类return reg.test(obj.className)}/*** 删除指定的样式类* @param obj 目标元素* @param cn 指定样式类*/function removeClass (obj, cn) {// 定义正则表达式const reg = new RegExp("\\b" + cn + "\\b")// 删除classobj.className = obj.className.replace(reg, "")}// 获取元素let external = document.getElementsByClassName('external')[0]let btn = document.getElementsByClassName('btn')[0]// 设置监听函数external.onmouseenter = function () {// 给容器添加样式addClass(external, "external1")// 给按钮添加样式addClass(btn, "btn1")}external.onmouseleave = function () {// 删除样式removeClass(this, "external1")removeClass(btn, "btn1")}btn.onmouseenter = function () {// 添加样式addClass(this, "btn2")}btn.onmouseleave = function () {// 删除样式removeClass(this, "btn2")}
</script>
</body>
</html>