onmouseenter和onmouseover

onmouseover 与 onmouseenter 作为两个效果相似的鼠标事件，经常被我们使用，但是二者还是有区别的。

在具体的使用中，两者的效果是相似的，使用的场景并没有太大的区别，效果类似css中的hover。但是，两者还是存在一定的区别的，那就是mouseenter不支持冒泡，而mouseover支持冒泡。冒泡指的是事件冒泡，即在子元素上触发的事件会向上传递至父级元素，并触发绑定在父级元素上的相应事件。

那么，如何证明这两个事件是否支持，事件冒泡呢，js的事件机制给了我们一个很好的解决方法，那就是target(事件源)，在事件触发时，浏览器会产生一个event对象，在这个对象上有一个target属性，指向了触发事件的最底层的DOM，通过target我们可以准确的找到事件触发的元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onmouseover&onmouseenter</title><style> #outer{position: relative;width: 200px;height: 200px;margin: 100px;border: 1px solid #ccc;}#inner{position: absolute;left: -50px;top: 0;width: 100px;height: 100px;border: 1px solid #ccc;}       </style>
</head>
<body><div id="outer">    <div id="inner"></div></div><script>outer.onmouseenter = function(e){console.log(e.target.id) // outer}outer.onmouseover = function(e){console.log(e.target.id) // inner}</script>
</body>
</html>

效果图：

当鼠标移到outer时：

当鼠标移到outer中的inner时：

当鼠标移到outer外的inner时：

onmouseenter和onmouseover相关推荐

【unity学习笔记】OnMouseEnter、OnMouseOver、OnMouseExit
声明:此篇文章是个人学习笔记,并非教程,所以内容可能不够严谨.可作参考,但不保证绝对正确.如果你发现我的文章有什么错误,非常欢迎指正,谢谢哦 OnMouseEnter.OnMouseOver.OnMo ...
onmouseenter和onmouseover的区别
问题出现-项目需求: 最近在做的项目,需要一个上传图片的功能,需要在上传成功后,鼠标悬浮到图片上显示重新上传按钮,使用了onmouseover和onmouseout来控制按钮的显示和隐藏,发现当用on ...
onMouseEnter,onMouseLeave,onMouseOver,onMouseOut的区别
1.onMouseEnter和onMouseLeave: onMouseEnter:当鼠标移入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发. onMouseLeave:当鼠标移出指定 ...
onmouseenter与onmouseover区别
两事件都是鼠标移至节点上执行:但是onmouseover移至节点上,停止在移动,依旧在节点上时还是会执行,也就是说会执行多次:而onmouseenter仅是进入节点时执行一次.
鼠标移入事件onmouseover、onmouseenter 鼠标移出事件onmouseleave、onmouseout 的区别
onmouseenter和onmouseover都是鼠标移入事件,即鼠标放入到元素上相应事件触发,但是这两个事件是存在差别的. onmouseover.onmouseout子元素会影响到父元素, 而o ...
JS鼠标事件onMouseOver和onMouseOut的坑
在React中监听鼠标点击事件,UI如下,左右有padding. 然后鼠标从左往右慢慢滑入HOMR再滑出. UI代码: 事件绑定在外层父元素上. 事件触发顺序如下. 1 鼠标只碰触父元素padding ...
Unity3D中的函数方法及解释
一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...
Unity3D时间顺序与功能
Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结. Awake 当 ...
dojo使用query dojo/query
要使用query,就要引入dojo/query包. query可以根据Dom里节点的标签名.id名.class名来检索一个或多个节点. -------------------------------- ...

onmouseenter和onmouseover

onmouseenter和onmouseover相关推荐

最新文章

热门文章