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>

onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别相关推荐

HTML用ONMOUSEOVER,ONMOUSEOUT改变背景色或背景图片的方法
1.用onmouseout onmouseover 图像间相互变换: <image src="img1" οnmοuseοver="this.src='img2' ...
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout) onfocus/onblur:聚焦离焦事 ...
html可变换的背景图片,HTML用ONMOUSEOVER,ONMOUSEOUT改变背景色或背景图片的方法_html/css_WEB-ITnose...
1.用onmouseout onmouseover 图像间相互变换: 2.onmouseover onmouseout 改变文字背景色: οnmοuseοut="style.backgrou ...
鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点
1.onmouseover 指的是鼠标在进入某个元素的时候触发的事件 2.onmouseout 指的是鼠标在离开某个元素时触发的事件其他 onclick----------------------- ...
java onmouseover_转 CSS样式里使用JavaScript(onmouseover/onmouseout)
CSS样式里使用JavaScript(onmouseover/onmouseout)2 table { background-color:#000000; cursor:hand; } td { /* ...
onmouseover 、onmouseout和onmouseenter、onmouseleave的区别-简记
onmouseover.onmouseout: 1) onmouseover:鼠标进入元素时触发,onmouseout:鼠标离开元素时触发: 2) 特点:鼠标经过子元素时,其父元素的onmouseov ...
JS事件：onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
1.onmouseover.onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件:(父亲有的东西,儿子也有) 2.onmouseenter.onmouseleave:鼠标经过时自身 ...
onMouseEnter,onMouseLeave,onMouseOver,onMouseOut的区别
1.onMouseEnter和onMouseLeave: onMouseEnter:当鼠标移入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发. onMouseLeave:当鼠标移出指定 ...
onmouseover 、onmouseout和onmouseenter、onmouseleave的区别
onmouseover.onmouseout: onmouseover:鼠标进入元素时触发 onmouseout:鼠标离开元素时触发特点:鼠标经过子元素时,其父元素的onmouseover.onmo ...

onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别

onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别相关推荐

最新文章

热门文章