jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)

1.简单阐述mouseover和mouseenter的不同之处

mouseover:在移入子元素的时候也会触发,对应mouseout mouseenter:移入当前元素会触发，如果有子元素，则不会触发,对应mouseleave hover():这个方法里面实质上就是使用mouseenter()和mouseleave()

2.代码实例测试

  
    
    
    My JSP 'practice_02.jsp' starting page
    
	
	
	    
	
	
	
	
		*{margin:0;padding:0;}
		.div1 {
			position:absolute;
			display:flex;
			align-items:center;
			width:200px;
			height:200px;
			background-color:red;
		}
		.div2 {
			width:100px;
			height:100px;
			background-color:yellow;
		}
		.div3 {
			position:relative;
			display:flex;
			align-items:center;
			width:200px;
			height:200px;
			background-color:blue;
			left:300px;
			float:left;	
		}
		.div4 {
			width:100px;
			height:100px;
			background-color:yellow;
		}
		
	
  
  
  	
	  	
	  		div2...div1...
	  	
	  	
	  		div4...div3...
	  	
  	
  	
	
		/*
			区别mouseover和mouseenter的不同之处
			mouseover:在移入子元素的时候也会触发,对应mouseout
			mouseenter:移入当前元素会触发，如果有子元素，则不会触发,对应mouseleave
			hover():这个方法里面实质上就是使用mouseenter()和mouseleave()
		*/
		$('.div1')
		.mouseover(function() {
			console.log('mouseover 进入');
		})
		.mouseout(function() {
			console.log('mouseout 离开');
		});
		
			
		$('.div3')
		.mouseenter(function() {
			console.log('mouseenter 进入');
		})
		.mouseleave(function() {
			console.log('mouseleave 离开');
		});
	
  

3.效果图

1.div1绑定了mouseover(鼠标移入)与mouseout(鼠标移出)事件 (1)我们看一下后台有什么输出(大家把黑色的点当做鼠标的移动) (2)第二步移动 (3)第三步移动 实验证明，当移入div1的子元素div2的时候，触发了mouseout事件，并且移入离开div2时会触发mouseover与mouseout事件

2.div3绑定了mouseenter(鼠标移入)与mouseleave(鼠标移出)事件

(1)第一步移动 (2)第二步移动

(3)第三步移动

实验证明，及时div4拥有子元素，在移入移出子元素的时候也不会触发mouseenter和mouseleave事件