一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～
关于鼠标事件： 有这样几个成员：mousedown和mouseup、mouseenter和mouseleave、mouseout、mouseover、mousemove;另外的click、dbclick就不说了。
mousenter和mouseleave不支持冒泡。
mousedown和mouseup
我们先来辨析这对兄弟：
mousedown: 用户按下任意鼠标键触发。mouseup: 用户按释放任意鼠标键触发。 注意：这里是任意鼠标键（左键、右键、滚轮点击都算）
由图可知：先点击parent，后点击child，child的事件出现了冒泡，同时触发了parent的事件。
mouseenter和mouseleave
mouseenter: 用户把鼠标光标从元素外部移到元素内部触发。mouseleave: 用户把鼠标光标从当前元素内部移到元素外部触发。
由图可知：先从parent外部移入内部，接着是child，然后从child内部移到外部。
mousemove
mousemove: 鼠标光标在元素上移动时反复触发。
mouseout与mouseleave
mouseout: 把鼠标光标在从一个元素移到另外一个元素触发。移到的元素可以是子元素或外部元素。
上图是mouseleave的效果
上图是mouseout的效果
mouseleave的范围是当前元素外部，而mouseout的范围包括了当前元素的外部和子元素的内部。 所以mouseout功能更强一些。
mouseover和mouseenter
mouseover: 用户把鼠标光标从元素外部移到元素内部触发。
上图是mouseenter的效果
上图是mouseover的效果
mouseenter比较单纯，进入当前元素的内部触发，而mouseover除了进入当前元素内部触发之外，由子元素到当前元素也会触发此事件。
总结一下： mouseout是mouseleave的增强版，mouseover是mouseenter的增加版。
那么mouseover和mouseout也是一对咯！
最后说下鼠标事件点击到释放执行顺序：
好了！文章就到此结束了。
希望大家对鼠标事件有个更深的了解。
