疫情过后回武汉的第一天打卡，今天偶然遇到一个问题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. Dubbo 入门-细说分布式与集群

    什么是Dubbo Dubbo是一款高性能.轻量级的开源Java RPC框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. 什么是RPC RPC全称(Rem ...

  2. django 从零开始 8 用户登录验证 待测

    看文档 djang 自带一个用户登录验证的方法,不过有些看着懵逼,去网上找了一圈,发现很多都是照抄文档说明的,几乎没说啥原理 特别是 from django.contrib.auth import a ...

  3. 作为一个Tester，你在客户环境能保证质量吗？

    公司严格地按照“产品-项目”模式来架构技术部门. 我又测产品,又测项目,所以一方面可以从项目测试的角度发现产品bug,并且给产品提供改进意见,一方面还能测产品为项目赋能,保证项目质量,让项目经理轻松些 ...

  4. Flink系列之1.10版流式SQL应用

    随着Flink 1.10的发布,对SQL的支持也非常强大.Flink 还提供了 MySql, Hive,ES, Kafka等连接器Connector,所以使用起来非常方便. 接下来咱们针对构建流式SQ ...

  5. chrome 和 chromeDriver

    在写selenium的时候,发现很简单的case也报错 package com.lv.test; import org.junit.Test; import org.openqa.selenium.W ...

  6. 问题描述：判断一个整数 n 是否为 2 的幂次方

    一.2的幂次方的基本定义 什么样的数为2的幂次方?例如2^0=1,2^1=2,2^2=4……,符合公式2^n(n>=0)的数称为2的幂次方. 如何判断一个数是否为2的幂次方呢?基本思路:把一个数 ...

  7. mongo请求超时

    no_cursor_timeout=True参数的使用 实例: import pymongo handler = pymongo.MongoClient().db.col with handler.f ...

  8. Python3学习之路~10.1 多进程、进程间通信、进程池

    一 多进程multiprocessing multiprocessing is a package that supports spawning processes using an API simi ...

  9. 图解I/O模型

      本文带你鸟瞰I/O模型全貌,希望可以让你对I/O模型有一个直观的认识 什么是I/O?I/O的过程?同步阻塞 I/O同步非阻塞 I/OI/O多路复用异步I/O 什么是I/O?   I/O就是计算机内 ...

  10. Spinner 用法

    </Spinner> <TextView android:layout_width="wrap_content" android:layout_height=&q ...