javascript核心技术(二十四)事件类型(三)onmouseover onmouseout

[复制链接]
查看: 1002|回复: 31
发表于 2023-1-24 19:47:04 | 显示全部楼层 | 阅读模式
在工作中,常常会分不清mouseente和mouseover,mouseleave和mouseout的区别,这里我们特别说明如下:
  1. mouseover是鼠标移入事件,与mouseente的区别是:mouseover鼠标从父元素移入到子元素上时也会触发
  2. mouseout是鼠标离开事件,与mouseleave的区别是:mouseout鼠标从子元素移出到父元素上时也会触发
  3. 将mouseover和mouseout绑定到父元素上时,当鼠标移入或移出父元素时触发,当鼠标在父元素和子元素之间移动时也会触发。
复制代码
请看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="d" style="width:200px;height:200px;border:1px solid red">
    父元素
    <div id="inner" style="width:100px;height:100px;border:1px solid gray">
    子元素
    </div>
</div>
<script type="text/javascript">
    var d = document.getElementById('d');//获取父元素

    // mouseover和mouseout区分父子元素,在父子之间移入移出会触发
    d.onmouseover = function(){
        console.log('enter');
    }
    d.onmouseout = function(){
        console.log('leave');
    }
</script>
</body>
</html>

javascript核心技术(二十四)事件类型(三)onmouseover onmouseout

以上,我们给父元素绑定了onmouseover和onmouseout事件。
实验的结果是:
当鼠标移入父元素时会触发onmouseover事件,从父元素移入子元素时先触发onmouseout再触发onmouseover事件。
当鼠标从子元素移入到父元素时,先触发onmouseout事件,再触发onmouseover事件。
当鼠标从父元素移出时触发onmouseout事件。
javascript核心技术(二十四)事件类型(三)onmouseover onmouseout
大家可以自行测试一下。

易博软件介绍

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-2-16 15:01:14 | 显示全部楼层
谢谢分享,受益不少。
发表于 2023-3-1 22:00:28 | 显示全部楼层
看后我十分相信,也十分赞同现在中国大学生的学习现状。
发表于 2023-3-10 14:20:47 | 显示全部楼层
你写出了所有编程序人的心声  很好  我很受用  ~~~~~  ~~~~~~~~~~~~~~~~~~~~~~~~~  @@@@@@@@@@^^

0

主题

13

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-21 04:55:44 | 显示全部楼层
努力也

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-27 12:55:56 | 显示全部楼层
受益匪浅呀,我一定好好学习,好好把握剩下的大学时光

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-4-2 08:11:13 | 显示全部楼层
有点怕怕的,面试这么严

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-7 08:23:24 | 显示全部楼层
有没有福州VB开发的高手,我想认识一下!

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-4-12 10:16:17 | 显示全部楼层
很受启发!  谢谢!  
发表于 2023-4-17 05:23:20 | 显示全部楼层
dddddddddddd
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表