jQuery学习：mouseenter与mouseover区别

最新推荐文章于 2023-01-31 20:28:05 发布

¡Venceremo

最新推荐文章于 2023-01-31 20:28:05 发布

阅读量246

点赞数

分类专栏： jquery 文章标签： jquery 学习前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127835327

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

本文探讨了JavaScript中mouseover与mouseenter事件的区别，以及它们在处理元素移入移出时的行为。示例代码展示了在拥有子元素的情况下，mouseover会因进入子元素而触发，而mouseenter则只在进入父元素时触发。此外，还提到了事件监听的两种方式，addEventListener允许添加多个事件处理函数，而直接赋值的onclick属性会覆盖原有的事件处理函数。

摘要由CSDN通过智能技术生成

mouseenter:只有移入当前元素才会触发，对应mouseleave

hover使用的是mouseenter与mouseleave

mouseover：在移入子元素时也会触发，对应mouseout

	<div id="div1">div1
			<div id="div2">div2</div>
		</div>
		<div id="div3">div3
			<div id="div4">div4</div>
		</div>

			#div1,#div3 {
				width: 200px;
				height: 200px;
				background: #bfa;
				position: absolute;
			}
				
			#div3{
				left: 250px;
			}

			#div2,#div4 {
				width: 100px;
				height: 100px;
				background: skyblue;
				position: relative;
				top: 50px;
				left: 50px;
			}

在进入子元素的时候也会使得出现进入离开的触发

			$('#div1').mouseover(function(){
				console.log('mouseover进入')
			}).mouseout(function(){
				console.log('mouseout离开')
			})
			$('#div3').mouseenter(function(){
				console.log('mouseenter进入')
			}).mouseleave(function(){
				console.log('mouseleave离开')
			})

	//可以加多个
			document.getElementById('div1').addEventListener('click',function(){
					console.log('click1');
			})
			document.getElementById('div1').addEventListener('click',function(){
					console.log('click2');
			})

		//不可以两次
			document.getElementById('div1').onclick=function(){
					console.log('click1');
			}
			//只有一个生效
			document.getElementById('div1').onclick=function(){
					console.log('click2');
			}