疫情过后回武汉的第一天打卡，今天偶然遇到一个问题onmouseover 、onmouseout 与onmouseenter 、onmouseleave这些事件的区别，也看了一些博客，感觉不是很清楚，所以也写了一下自己的理解，略做分享和学习。

首先我们都知道onmouseover和onmouseenter都属于鼠标进入的状态，onmouseout和onmouseleave都是鼠标移开的状态，那么我们来看看主要区别。

　　一般来说，onmouseover、onmouseout一起使用，鼠标经过时自身触发事件，经过其子元素时也触发该事件，每经过一次子元素都触发该事件，属于不断触发；onmouseenter、onmouseleave：鼠标经过时自身或者其子元素都触发事件，但是只触发一次。

　　代码演示效果如下：

执行onmouseover、onmouseout时，鼠标经过子元素a和b时，颜色都会再次变化，而onmouseenter、onmouseleave子元素a和b的移动不会引起颜色的再次变化

JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别的更多相关文章

  1. onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave

    [onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave] 1.onmouseleave.onmouseenter,鼠标进入到指定元素区 ...

  2. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  3. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  4. 关于JS事件的几点总结

    1.理解事件(2点) 事件行为本身:没有给事件绑定方法事件也是一直存在的,当触发行为的时候,也对触发对应的行为,只不过由于没有绑定事件,导致没有任何事件发生: 事件绑定:给元素绑定一个方法:触发行为, ...

  5. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  6. js 事件相关 事件处理 封装 事件封装 DOM 0 2 3 级事件

    1.绑定 function(element, type, handler){        if (element.addEventListener) {            element.add ...

  7. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  8. js事件常用操作、事件流

    注册事件 给元素添加事件,称为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听注册方式 传统方式 on开头的事件,例如onclick <button onclick="a ...

  9. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

随机推荐

  1. Java基础--面向对象（上）

    一.面向对象的概念 1.什么是面向对象? (1)面向对象是一种符合人类思维习惯的编程思想. (2)面向对象是一种思考问题的思维方式. 2.三种特性: (1)封装性 (2)继承性 (3)多态性 3.建立 ...

  2. position:absolute和width的关系

    碰到如下问题: 如图,我设置了宽高和绝对定位 ,但实际上我图片显示宽度为0: 然后我就查了一下,发现是因为我设了公共img宽度有个max-width:100%:屏蔽掉就有正常宽了,这点暂时没明白为啥 ...

  3. 基于springcloud搭建项目-Ribbon篇(三)

    这篇文章主要是介绍一下ribbon的用法,我们都知道ribbon是负载均衡,但是却不知道他是怎么样的负载均衡,怎么用,能干嘛? ● 其实,简单的说,Spring Cloud Ribbon是基于Netf ...

  4. java编写非对称加密,解密,公钥加密，私钥解密，RSA，rsa

    非对称加密已经被评为加密标准,主要包含(公钥加密私钥解密,或者私钥加密公钥解密)本文主要讲解的是如何用java生成 公钥和私钥并且 进行字符串加密 和字符串解密    //如需要代码copy如下 im ...

  5. DOM是什么（初级版）

    js新手村出村之路--基础知识 在这里默认你已经粗粗的自学过了一遍js知识.(也许是在昏昏欲睡的课堂上听了两分钟,也许是跟着b站上的视频打了一遍.who cares) 在下面的内容中我将整理一些在平常 ...

  6. jenkins操作

    jenkins忘记用户名以及登录密码的解决方法 1.jenkins 根目录下找到config.xml,修改配置  <useSecurity>true</useSecurity> ...

  7. Java Grammar（三）：修饰符

    简介 修饰符是用于限定类型以及类型成员申明的一种符号,从修饰对象上可以分为类修饰符,方法修饰符,变量修饰符:从功能上可以划分为访问控制修饰符和非访问修饰符.访问修饰符控制访问权限,不同的访问修饰符有不 ...

  8. A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesenchymal Stem Cells （解读人：王欣然）

    文献名:A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesen ...

  9. JDK_API关于时间的表达

    判断日期是否是闰年 给定格式格式化 第二种表示时间的 Date        java.util         类 Date 表示特定的瞬间,精确到毫秒. 构造方法            Date( ...

  10. Bash语句中的循环语句注意事项

    case #!/bin/bash case $1 in 9) echo "nine" ;; 8) echo "eight" ;; 7) echo "s ...