js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?

1. 鼠标事件

mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡

mouseenter：鼠标从元素外部移到元素内部时触发。

mouseleave：鼠标从元素内部移到元素外部时触发。

这两个事件 a) 不冒泡，b) 鼠标经过子元素时不触发父元素的该事件。

mouseover mouseout (一对事件鼠标的移入和移出 , 支持冒泡事件(所以子元素的该事件默认会触发父元素上的该事件；除非阻止冒泡)；

mouseover：鼠标从元素外部移到元素内部时触发。

mouseout：鼠标从元素内部移到元素外部时触发。

这两个事件 a)冒泡，b) 鼠标经过子元素时也触发父元素的该事件。

ex: 比如鼠标从父元素移入到子元素会触发父元素的mouseout 触发子元素的mouseover 又因为冒泡会触发父元素的mouseover; 同时也是进入子元素,所以会触发子元素的mouseenter;

但是此时鼠标并未离开父元素; 所以不会触发父元素的mouseleave )
总结: 父mouseout -> 子mouseover -> 父mouseover -> 子mouseenter

鼠标从子元素移出; 移入父元素 : 首先会触发子元素的mouseout , 因为冒泡所以触发父元素的mouseout; 又因为离开了子元素所以触发子元素的mouseleave; 移入并进入父元素, 触发父元素的mouseover
总结: 子mouseout -> 父mouseout -> 子mouseleave -> 父mouseover

mousedown （鼠标左右任意键按下) 默认冒泡

mmouseup( 鼠标左右任意键抬起) 默认冒泡

click (鼠标左键按下 mousedown -> mouseup -> click) 默认冒泡

dblclick（注意，是 dbl）默认冒泡

mousemove 是如果鼠标移动操作实时响应事件，比如鼠标拖动一个元素默认冒泡

mousewheel 鼠标滚轮事件

2. 鼠标事件代码

<style>* {margin: 0;padding: 0;}div {/* position: relative; */margin-top: 50px;margin-left: 50px;width: 300px;height: 400px;display: flex;flex-wrap: wrap;background-color: aquamarine;}a {/* position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); */display: block;width: 100px;height: 100px;border: 5px solid #000;padding: 5px;background-color: brown;margin-left: 50px;display: flex;}.a1 {margin-top: 40px;}.a2 {margin-top: 70px;background-color: aquamarine;}em {position: absolute;top: 5000px;}
</style><body><div onmouseover="mouseoverfather()" onmouseout="mouseoutfather()" onmouseenter="mouseenterfather()"onmouseleave="mouseleavefather()" onmousedown="mousedownfather()"onmouseup="mouseupfather()"onmousemove="mousemovefather()"onclick="mouseclickfather()">father<a class="a1" href="javascript:;" onmouseover="mouseoverson()" onmouseout="mouseoutson()"onmouseenter="mouseenterson()" onmouseleave="mouseleaveson()"onmousedown="mousedownson1()"onmouseup="mouseupson1()"onclick="mouseclickson1()"onmousemove="mousemoveson1()">son1</a><a class="a2" href="javascript:;" onmouseover="mouseoverson2()" onmouseout="mouseoutson2()"onmouseenter="mouseenterson2()" onmouseleave="mouseleaveson2()">son2</a></div>
</body>
<script>function mouseoverfather() {console.log('父元素触发mouseoverfather')}function mouseoutfather() {console.log('父元素触发mouseoutfather')}function mouseenterfather() {console.log('父元素触发mouseenterfather')}function mouseleavefather() {console.log('父元素触发mouseleavefather')}//  父元素鼠标点击事件====================function mousedownfather() {console.log('父元素触发mousedownfather')}function mouseupfather() {console.log('父元素触发mouseupfather')}function mouseclickfather() {console.log('父元素触发mouseclickfather')}//  父元素鼠标点击事件====================function mousemovefather() { // 滑动console.log('父元素触发mousemovefather')}function mouseoverson() {console.log('11子元素触发mouseoverson')}function mouseoutson() {console.log('11子元素触发mouseoutson')}function mouseenterson() {console.log('11子元素触发mouseenterson')}//  鼠标点击事件====================function mouseleaveson() {console.log('11子元素触发mouseleaveson')}//  子元素鼠标点击事件====================  //  11子元素触发mousedownson1// mouse.html:126 11子元素触发mouseupson1// mouse.html:129 11子元素触发mouseclickson1//  因为冒泡 同时也会触发父元素的mousedown  mouseup clickfunction mousedownson1() {console.log('11子元素触发mousedownson1')}function mouseupson1() {console.log('11子元素触发mouseupson1')}function mouseclickson1() {console.log('11子元素触发mouseclickson1')}// 子元素鼠标点击事件====================function mousemoveson1(){console.log('11子元素触发mousemoveson1')}function mouseoverson2() {console.log('22子元素触发mouseoverson2')}function mouseoutson2() {console.log('22子元素触发mouseoutson2')}function mouseenterson2() {console.log('22子元素触发mouseenterson2')}function mouseleaveson2() {console.log('22子元素触发mouseleaveson2')}</script>

// 对于鼠标的移进移出
// 1：father 触发 mouseover 和 mouseenter;
// 打印：
// 父元素触发mouseoverfather
// 父元素触发mouseenterfather

// 2: father 触发 mouseover(因为冒泡) 和 mouseenter; son1 触发mouseover 和 mouseenter
// 打印：
// 父元素触发mouseoutfather
// 11子元素触发mouseoverson
// 父元素触发mouseoverfather
// 11子元素触发mouseenterson

// 3. father 触发mouseout(因为冒泡) 和 mouseover；son1 触发mouseout 和 mouseleave
// 打印：
// 11子元素触发mouseoutson
// 父元素触发mouseoutfather
// 11子元素触发mouseleaveson
// 父元素触发mouseoverfather

// 4 同理2 5同理3

// 6: father 触发 mouseout 和 mouseleave
// 打印：
// 父元素触发mouseoutfather
// 父元素触发mouseleavefather

js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?相关推荐

鼠标浮动到表格的某行背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]
之前一直觉得很难,今天用到了好像超级简单 <table id="tableData"><tr class="flag"><td& ...
关于mouseover,mouseout 和 mouseenter,mouseleave
mouseover和mouseenter区别做了个测试. mouseover 当鼠标进入元素时候触发事件. 进入子元素时,又触发了一次事件鼠标离开子元素回到事件元素的时候又触发一次. 也就是说当鼠 ...
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来鼠标指针位于一个元素上方,然后用户将其移入另一 ...
JS鼠标事件实现动效
1 JS鼠标事件 click鼠标点击事件事件对象.onclick=function() {} mousedown / mouseup 鼠标按下/松开事件事件对象.onmousedown =func ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
JS鼠标事件（非常详细）
这里写目录标题一. 常用到的鼠标事件鼠标点击鼠标移动鼠标经过鼠标来源鼠标定位鼠标按键一. 常用到的鼠标事件在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠 ...
c语言鼠标事件的详解,JS鼠标事件（非常详细）
在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型事件类型说明 click 单击鼠标左键时发生,如果右键也按下则不会发生.当用 ...
计算机图形学Web前端笔记-图形平移放缩原理及实现（two.js鼠标事件适用所有渲染）
在two.js中,只提供了svg渲染时的鼠标事件,而canvas和webgl并没有提供,这样就对本人造成了很大的困扰,因此学习了下计算机图形学相关的知识,实现了利用two.js绘图在canvas.sv ...
JS 鼠标事件与键盘事件
一.鼠标事件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 o ...

js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?

js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?相关推荐

最新文章

热门文章