onmouseover和onmouseenter都是鼠标进入时触发，onmouseover在所选元素的子元素间切换的时候也触发！

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      border: 1px solid #aaa;
      margin: 20px;
    }
  </style>
 </head>
 <body>
  <div id="d1">
    AA
    <p>BB</p>
    CC
  </div>
  <div id="d2">
    AA
    <p>BB</p>
    CC
  </div>

  <script>
    var counter1 = 0
    d1.onmouseover = function(){
      counter1++;
      console.log('COUNTER1:'+counter1);
    }
    //mouseover在子元素间切换时也会触发

    var counter2 = 0
    d2.onmouseenter = function(){
      counter2++;
      console.log('COUNTER2:'+counter2);
    }
  </script>
 </body>
</html>

onmouseover和onmouseenter区别的更多相关文章

  1. onmouseover与onmouseenter区别

    1.onmouseover.onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件:(父亲有的东西,儿子也有) ,支持冒泡 2.onmouseenter.onmouseleave:鼠 ...

  2. Vue中 onmouseenter,onmouseleave,onmouseover,onmouseout的区别

    今天在学Vue视频的时候,提到了这四个触发事件,我就想做下笔记: 1.onmouseenter和onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发 ...

  3. onmouseenter,onmouseleave,onmouseover,onmouseout的区别

    首先,这四个事件两两配对使用,onmouseenter.onmouseleave一对,onmouseover.onmouseout一对,不能混合使用. onmouseenter 和 onmousele ...

  4. JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别

    疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...

  5. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  6. The different of mouseover and mouseenter

    l论事件onmouseover 和 onmouseenter:同类比较onmouseout 和 onmouseleave; 使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素: ...

  7. JavaScript 知识点

    JS基础 页面由三部分组成: html:超文本标记语言,负责页面结构 css:层叠样式表,负责页面样式 js:轻量级的脚本语言,负责页面的动效和数据交互 小总结:结构,样式和行为,三者相分离 在htm ...

  8. canvas练手项目（二）——各种操作基础

    想想应该在canvas上面作画了,那么就不得不提到事件了. (打着canvas的旗号,写着mouse事件.挂羊头卖狗肉!哈哈哈哈哈~) 先来看一看HTML事件属性,我们要用的就是Mouse事件,就先研 ...

  9. 《MarkMark学习笔记学习笔记》html学习笔记

    iframe里有一个srcdoc属性,很有用! window.location.href=document.referrer//可以实现返回上一级页面并刷新 HTML5权威指南©®,比较老的书了,有些 ...

随机推荐

  1. 多线程 Thread.yield 方法到底有什么用？

    概念 我们知道 start() 方法是启动线程,让线程变成就绪状态等待 CPU 调度后执行. 那 yield() 方法是干什么用的呢?来看下源码. /** * A hint to the schedu ...

  2. Java使用OkHttps工具类调用外部接口

    前言 现在公司业务已止不是传统的增删改查等简单的业务处理操作,而是对数据各种联调三方接口与其他系统进行交互等,那么就需要我们在后台java中进行外部接口的调用,本文采用OkHttps工具类对接微信接口 ...

  3. System.net.mail.smtpException;服务器提交了协议冲突 服务器响应为：

    最近发邮件遇到问题. 主机godaddy 端口 25,80 都可以用 stmp服务器地址:smtpout.secureserver.net 不支持ssl 我就吧 EnableSsl 设置为false了 ...

  4. SQL中EXPLAIN命令详解

    explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explain就可以了: 如: expla ...

  5. Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验

    Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...

  6. struts2框架(1)---struts2入门

    struts2框架 如果你之前在MVC模式的时候一直都是通过servlet,获取和返回数据,那么现在开始学习struts2框架, Struts是一个实现MVC设计模式的优秀的框架.它的许多优点我就不说 ...

  7. IdentityServer4（7）- 使用客户端认证控制API访问（客户端授权模式）

    一.前言 本文已更新到 .NET Core 2.2 本文包括后续的Demo都会放在github:https://github.com/stulzq/IdentityServer4.Samples (Q ...

  8. TypeError: Cannot red property 'style' of null 错误解决

    错误信息如下: JSP代码如下: <c:if test ="${not empty excelErrors}"> <div id="excelError ...

  9. Cookie提要

    Cookie的基本概念和设置  Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制.从实现上说,Cookie是存储在客户端上的小段数据,浏览器(即客户端)通过HTTP协议和服务器端进行Coo ...

  10. 机器学习排序算法：RankNet to LambdaRank to LambdaMART

    使用机器学习排序算法LambdaMART有一段时间了,但一直没有真正弄清楚算法中的所有细节. 学习过程中细读了两篇不错的博文,推荐给大家: 梯度提升树(GBDT)原理小结 徐博From RankNet ...