jQuery鼠标事件

悠悠 2022-04-24 06:00 264阅读 0赞

今天，我们来讲讲，在jQuery中鼠标事件的方法与应用。  
在jquery中触发鼠标事件的方法有6种分别是1、click（单击事件），2、dbclick（双击事件），3、mousedown（鼠标按下事件），4、mouseup（鼠标弹起事件），5、mouseenter（鼠标移入事件），6、mouseleave（鼠标移出事件）。  
在jquery中，也有一个像css中hover的伪类，效果也是一样，鼠标的移入移出事件，  
但它比meuseenter（鼠标移入事件）和mouseleave（鼠标移出事件）方便的原因是它只需要设置一次，调用两次函数，第一个是移入，第二个就是移出了，如图一

![在这里插入图片描述][20190418082404362.PNG]  
图一  
图一中可以看到，hover的第一个函数，鼠标移入时触发事件，第二个函数，鼠标移出时触发，我们再来看下使用meuseenter（鼠标移入事件）和mouseleave（鼠标移出事件）的对比如图二  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]  
图二  
可以看到对比，这样写就要多设置一次，比较麻烦，为了代码的优化，我们还是介意若不是要单独使用meuseenter（鼠标移入事件）或mouseleave（鼠标移出事件）这俩个事件的话，就使用hover会好很多。  
至于1、click（单击事件），2、dbclick（双击事件），3、mousedown（鼠标按下事件），4、mouseup（鼠标弹起事件）这4个鼠标事件的使用方法也和上图一样如  
$(“类名或id名”).（想要的鼠标事件）（function()\{\});  
只需要按照这个格式即可。鼠标的事件就大概这些，具体用在什么地方，就看大家各取所需了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]  
附上各鼠标事件的代码

[20190418082404362.PNG]: /images/20220218/a3aed32c02fd4ea0b9dd48634f06e177.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]: /images/20220218/a171985fcfa845acaf26c269cc0af372.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]: /images/20220218/436e90ea5d854a0d917ad201634ebe26.png