mouseenter、mouseleave与mouseover、mouseout的区别

mouseenter、mouseleave与mouseover、mouseout都是处理鼠标的移入移出事件，但mouseover、mouseout事件在绑定节点的子节点中也会触发，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#out{width: 200px;height:200px;background-color: red;display: flex;justify-content: center;align-items:center;}#in{width: 100px;height:100px;background-color: green;}</style>
<body><div id="out"><div id="in"></div></div>
<script>let outDom = document.querySelector('#out');outDom.onmouseenter = function () {console.log('mouseenter');};outDom.onmouseleave = function () {console.log('mouseleave');};outDom.onmouseover = function (event) {console.log('mouseover');};outDom.onmouseout = function (event) {console.log('mouseout');};
</script>
</body>
</html>

以上代码创建两个父子关系的div，给#out分别绑定mouseenter、mouseleave与mouseover、mouseout事件，将鼠标从左至右滑过观察控制台打印结果：

可以发现当鼠标划过#out左侧边框时出发了mouseover与mouseenter事件，紧接着划过#in左侧边框时触发了mouseout与mouseover事件，划过#in右侧边框时又触发了mouseout与mouseover事件，直达最后移出#out时触发了mouseout与mouseleave事件。综上观察可以看出：mouseenter与mouseleave只在鼠标从#out移入、移出时才会触发，而mouseenter与mouseout不但会在#out移入移出触发，还会在子节点#in移入移出时触发。

mouseenter、mouseleave与mouseover、mouseout的区别相关推荐

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来鼠标指针位于一个元素上方,然后用户将其移入另一 ...
hover和mouseover，mouseout的区别
说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...
mouseover事件mouseenter事件mouseleave事件和mouseout事件之间的区别与联系
文章目录两者定义两两区别例子小结两者定义 mouseover:鼠标覆盖 mouseenter:鼠标进入 mouseleave:鼠标移出 mouseout:鼠标移出两两区别既会捕获也会冒泡 ...
java mouseenter_关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉 ...
mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
鼠标浮动到表格的某行背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]
之前一直觉得很难,今天用到了好像超级简单 <table id="tableData"><tr class="flag"><td& ...
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...

mouseenter、mouseleave与mouseover、mouseout的区别

mouseenter、mouseleave与mouseover、mouseout的区别相关推荐

最新文章

热门文章