疫情过后回武汉的第一天打卡，今天偶然遇到一个问题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. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

  2. Java Opencv 实现锐化

    § Laplacian() void cv::Laplacian    (    InputArray     src,                                       O ...

  3. Python3基础语法和数据类型

    Python3基础语法 编码 默认情况下,Python3源文件以UTF-8编码,所有字符串都是unicode字符串.当然你也可以为原码文件制定不同的编码: # -*- coding: 编码 -*- 标 ...

  4. web安全测试--环境搭建

    本博客主要作为作者的学习笔记,请勿装载. 作为一个安全测试的入门选手,一切操作在虚拟机中进行是最保险的. 第一先下载自己喜欢的虚拟机,我的笔记本用的VirtualBox(下载地址:https://ww ...

  5. background-attachment 制造视差滚动效果案例

    简介 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动.可能的值有三个: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页 ...

  6. 数据库开发 Oracle与mysql间的批量处理接口 SSIS+存储过程实现

    公司目前不同的业务系统用了不同的数据库,涉及到oracle.mysql.sqlserver.而一些核心的业务在mysql中,所以平时经常要把oracle.sqlserver中的数据插入到mysql中. ...

  7. Ubuntu下实现歌词解析

    我们要明确目的,实现歌曲歌词同步. 1.将歌词文件一次性去取到内存中.(以周董的“简单爱”为例) a.用fopen打开歌词文件 FILE *fp  = fopen(“简单爱.lrc”,"r& ...

  8. Codeforces Round #369 (Div. 2)E

    ZS and The Birthday Paradox 题目:一年有2^n天,有k个人,他们的生日有冲突的概率是多少?答案用最简分数表示,分子分母对1e6+3取模.1 ≤ n ≤ 10^18, 2 ≤ ...

  9. 【Weiss】【第03章】练习3.7：有序多项式相乘

    [练习3.7] 编写一个函数将两个多项式相乘,用一个链表实现.你必须保证输出的多项式按幂次排列,并且任意幂次最多只有一项. a.给出以O(M2N2)时间求解该问题的算法. b.写一个以O(M2N)时间 ...

  10. EOS基础全家桶（一）开篇

    简介 从今天开始我会在FishoPark上与大家分享EOS的一些技术经验和基础,如果大家在看文章的过程中有任何问题,欢迎在网站下方的评论里留言,我会尽力为大家解答,如果发现我内容中所写有错,欢迎指正, ...