【jQuery】前端面试题之mouseover与mouseenter的区别

                          mouseover与mouseenter的区别

请先看下面讲解，文章最后有源代码

页面上有4个div，div2是div1的子元素，div4是div3的子元素

       给 div1 绑定了mouseover() 和 mouseout() 事件监听

       给 div3 绑定了mouseenter() 和 mouseleave() 事件监听

页面是这样的

---

mouseover()与mouseout()

1.鼠标进入 div1 时

2.当鼠标进入div1的子元素 div2 时

控制台输出了 “mouseout离开”     这表示什么？？？

表示进入div1的子元素div2时，触发了离开div1的mouseout()事件，表示鼠标指针暂时离开了div1，然后又触发mouseover()鼠标进入事件。mouseover()鼠标进入事件触发了两次

---

mouseenter()与mouseleave()

1.当鼠标进入div3时，控制台输出“用mouseenter进入”，表示鼠标进入了div3触发了mouseenter()事件

2.当鼠标进入div3的子元素 div4 时    (注：黑色箭头代表鼠标指针)

控制台并没有变化，表示什么？

表示进入div3的子元素div4时，并没有触发div3的mouseleave()离开事件，表示鼠标指针并没有离开了div3，

mouseenter()鼠标进入事件触发了一次。

区别显而易见了吧

总结

mouseover(); 在鼠标指针移入子元素时也会再次触发, 对应mouseout();

mouseenter();鼠标指针只有在移入当前元素时才触发, 对应mouseleave();

 

页面中该用哪种自己决定，如果都没有子元素，那随便用哪个方法。

对文章有什么问题或者建议请大佬在评论区指出，或者联系QQ：675174745，欢迎打扰。

---

源代码：(记得修改引入jQuery库的路径)

	
		
		
	
	

	

		

			区分鼠标的mouseover和mouseenter事件
		

		

			div1.....
			
div2....
		

		

			div3.....
			
div4....