mouseleave 和 mouseout , mouseenter 和 mouseover，mouseover 和mousemove

最新推荐文章于 2024-01-01 09:00:00 发布

起晚的蜗牛

最新推荐文章于 2024-01-01 09:00:00 发布

阅读量958

点赞数

分类专栏： Js 基础笔记

本文链接：https://blog.csdn.net/hupian1989/article/details/81108026

版权

Js 基础笔记专栏收录该内容

12 篇文章 10 订阅

订阅专栏

mouseenter 和 mouseleave 是一对事件，分别指鼠标移入和离开当前元素，这两个事件不冒泡；

mouseover 和 mouseout 是一对事件，指鼠标移入和离开元素，但是这个两个事件是冒泡，也就是说，鼠标移入或离开当前元素的子元素时，事件会冒泡到当前元素，当前元素的事件会被触发。

mousemove 是鼠标在元素上移动时触发，具有冒泡性质。鼠标在元素内部移动时也会触发该事件。

当鼠标从外移入元素内, 再移出元素，事件触发的时序为：mouseover，mouseenter，mousemove，mouseout , mouseleave

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function mousemove(x){
	console.log("mouse move");
}
function mouseout(x){
	console.log("mouse out");
}

function mouseenter(){
	console.log("mouse enter");
}
function mouseover(){
	console.log("mouse over");
}
function mouseLeave(){
	console.log("mouse leave");
}
	
</script>
</head>
<body>
<img onmousemove="mousemove(this)" 
	 onmouseover="mouseover(this)" 
	 onmouseleave="mouseLeave(this)" 
	 onmouseenter="mouseenter(this)"
	 onmouseout="mouseout(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
</body>
</html>

输入结果为：

mouse over
mouse enter
mouse move
mouse out
mouse leave

起晚的蜗牛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mouseleave 和 mouseout , mouseenter 和 mouseover，mouseover 和mousemove

mouseenter 和 mouseleave 是一对事件，分别指鼠标移入和离开当前元素，这两个事件不冒泡；mouseover 和 mouseout 是一对事件，指鼠标移入和离开元素，但是这个两个事件是冒泡，也就是说，鼠标移入或离开当前元素的子元素时，事件会冒泡到当前元素，当前元素的事件会被触发。mousemove 是鼠标在元素上移动时触发，具有冒泡性质。鼠标在元素内部移动时也会触发该...
复制链接

扫一扫

专栏目录