onmoseover 和 onmouseenter 的区别示例

最新推荐文章于 2023-06-21 16:46:03 发布
最新推荐文章于 2023-06-21 16:46:03 发布
阅读量652 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn372301467/article/details/87626907
本文详细解析了mouseenter、mouseleave、mouseover及mouseout等鼠标事件的区别与应用场景。通过对比这些事件在元素及其子元素上的触发行为，帮助读者深入理解事件冒泡机制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • onmouseenter 对应 onmouseleave
  • onmouseover 对应 onmouseout

助记：enter 和 leave 是动词，且比较长

  • 相同点在于，鼠标进入元素时，会触发 mouseenter 和 mouseover 事件
  • 区别发生在进入子元素时
  • 如果没有子元素，则没有区别

demo

给红色长方形注册 onmouseover/onmouseout 事件，鼠标延绿色箭头从左向右划
  • A 点触发一次 onmouseover 表示进入红色长方形
  • B 点触发一次 onmouseout 表示离开红色长方形（进入黑色长放形）；和一次 onmouseover 表示进入黑色长方形
  • C 点触发一次 onmouseout 表示离开黑色长方形（进入红色长方形）；和一次 onmouseover 表示进入红色长方形
  • C 点触发一次 onmouseout 表示离开红色长方形
给红色长方形注册 onmouseenter/onmouseleave 事件，鼠标延绿色箭头从左向右划
  • A 点触发一次 onmouseenter
  • D 点触发一次 onmouseleave
  • 其他点不触发事件

demo

onmouseover（HTML元素）
culi4814的博客
08-13 4555
描述 (Description) The onmouseover attribute is one of the most commonly used event attributes. It captures the moment that a cursor crosses the boundary of an element, moving from outside to inside th...
javascript 兼容FF的onmouseenter和onmouseleave的代码
10-30
在这部分内容中，提供了一段JavaScript代码示例，目的是为了在Firefox浏览器中模拟出`onmouseenter`和`onmouseleave`事件的效果。代码中定义了一个名为`xb`的对象，这个对象包含了一系列的方法，用于添加、移除事件...
鼠标事件（mouseover和mouseenter的区别）
weixin_48340600的博客
09-28 1万+
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是 1、mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性 2、mouseenter只经过自身盒子触发，没有冒泡特性 mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡 ...
onmouseenter和onmuseover的区别
gxf_ming的博客
03-21 788
x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); });
onmouseetner和onmuseleave
weixin_30314631的博客
10-14 107
其实有时候觉得IE还是不错的。onmouseenter,onmouseleave这样的方便的东西，他就支持了。可FF却不支持。现封装一下。如果不知道mouseenter,mouseleave的作用就自己百度一下。 /*----------------------------------------------------*/ //封装好的事件监听函数，同时让常见的浏览器支持mousee...
onmouseover与onmouseout事件处理器
yi3040的专栏
12-19 838
onmouseover与onmouseout事件处理器，分别对应为鼠标移上去和鼠标移开时触发。 onmouseover="this.className='class1';" 是鼠标移到该单元格上去时应用的css样式为“.class1”的样式 onmouseout="this.className='class2';"是鼠标离开单元格后应用的css样式为“.class2”的样式 附带一例子
Delphi中OnMouseEnter事件的应用与示例
虽然未能提供实际的文件内容，但我们可以推测这可能是包含源码的压缩文件，用户可能需要从该网站下载后，解压并使用Delphi IDE打开相应的Delphi项目文件（.dpr, .pas等），来查看和运行OnMouseEnter事件的示例代码。...
onmouseover和onmouseenter
03-16
onmouseover和onmouseenter都是JavaScript中的事件处理函数，用于在鼠标移动到指定元素上时触发相应的操作。 onmouseover事件在鼠标移动到元素上时触发，包括鼠标从元素内部移动到外部的情况。常用于实现鼠标悬停...
在Delphi中使用OnMouseEnter事件
05-11
摘要:Delphi源码,系统相关,OnMouseEnter OnMouseEnter事件用法例子，在Delphi中使用OnMouseEnter事件，具体效果请参见截图所示。 运行环境：Windows/Delphi7
onmouseenter
最新发布
09-06
`onmouseenter` 是一种JavaScript事件处理程序，它用于在鼠标指针进入元素的可见区域时触发。当用户将鼠标光标移动到元素上并停留，这个事件就会激活。这个事件通常与 `onmouseleave` 结合使用，形成一个交互效果，...
JavaScript中的onmouseover事件和onmouseout事件实例
热门推荐
平凡的平淡的博客
09-28 6万+
目录 JavaScript事件 onmouseover事件 onmouseout事件： onmouseover和onmouseout事件结合案例： HTML部分 CSS部分 javascript部分 最终效果： JavaScript事件 事件可以是浏览器行为，也可以是用户行为！ 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点...
Event事件
Schrodinge的博客
03-07 507
​ 事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件. ​ 事件是一瞬间触发。 事件绑定方式 ​ DOM节点绑定（格式）：节点.on+事件名 = 事件处理函数; //（1）DOM节点绑定 // *同名事件会被覆盖 // *事件处理函数只能冒泡阶段执行 div.onclick = function(){} //（2）作为html属性...
OnMouseEnter、OnMouseDown和OnMouseUp
qq_20179331的博客
06-21 3792
在Unity中，OnMouseEnter、OnMouseDown和OnMouseUp是用于处理鼠标事件的函数。这些函数可以被添加到Unity对象的脚本中，以便在鼠标与该对象交互时执行相应的操作。
JavaScript：可插入HTML页面的编程语言
weixin_48029567的博客
01-29 363
JavaScript：因特网上最流行的脚本语言脚本，轻量级、功能强大的编程语言。
onmouseover和onmouseout事件小结
brokenkay的博客
06-30 1万+
前言 onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明 我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...
onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
时间在飞飞的博客
09-03 1745
嗯嗯
onmouseenter与onmouseover区别
keybersan的博客
06-12 2582
两事件都是鼠标移至节点上执行；但是onmouseover移至节点上，停止在移动，依旧在节点上时还是会执行，也就是说会执行多次；而onmouseenter仅是进入节点时执行一次。...
对比onmouseover和onmouseenter
小彩虹的博客
01-22 848
对比onmouseover和onmouseenter onmouseover和onmouseenter都属于事件类型，都是用来代表鼠标移入的，但是两者有什么区别呢？今天就更大家分享一下。             鼠标移上,对比onmouseover和onmouseenter,两者作用相同,但是onmouseenter效率更高。 <!DOCTYPE html> <html&...
鼠标事件 onmouseenter 和 onmouseover 的区别
诗安的博客
06-21 7430
鼠标事件以一下代码为例 123     456 function add(){ console.log('father'); } function delect(){ console.log('son'); } 当为onmouseenter时不会冒泡，及不会重复触发父级事件，在进入父级时也不会触发子级事件。 当为onmouseover时会冒泡，只要进入到标签内就会触
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值