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. 写了2年python，知道 if __name__ == '__main__' 什么意思吗？

    相信刚接触Python的你一定有过如此经历,把所有的代码都写在 if __name__ == '__main__'下,因为有人告诉你,这样比较符合 Pythonista 的代码风格. 殊不知这段代码的 ...

  2. 解决SVN不显示绿色图标问题

    今天是上班的第50天,发现项目上的svn绿色图标没有了,于是上网查了一下,然后很简单的就找到了解决办法: 修改注册表 Windows Explorer Shell支持Overlay Icon最多15个 ...

  3. Linux编程 19 编辑器(vim 用法)

    一．概述 在开启shell脚本编程之前,必须要知道一款文本编辑器的用法,如文本编辑的查找,剪切,粘贴,定位等, 本篇只讲vim编辑器.vim编辑器全名叫vi improved,是经过对Unix系统vi ...

  4. 详解网络编程必会的poll和epoll函数

    前言 之前已经介绍过select函数,请参考这篇博客:https://www.cnblogs.com/liudw-0215/p/9661583.html,原理都是类似的,有时间先阅读下那篇博客,以便于 ...

  5. 浅谈《think in java》：二 一切都是对象

    清晨坐在图书馆,今天聊聊早晨的“果实”. 清单1. 引用操作:对象创建:存储地方:基本类型:数组 “reference”:引用[操作对象的标识符] 例子:创建String类型的引用,并不是对象. St ...

  6. 函数式编程之-定义能够支持Partial application的函数

    是时候介绍如何在F#中定义函数了,在你没有接触过函数式编程语言之前,你也许会觉得C#/Java的语法已经够丰富了,有什么任务做不了呢?当你读过函数式编程之Currying和函数式编程之Partial ...

  7. 【转载】ucos临界段

    其实很简单:     临界段就是不可中断的程序段,比如从UART中读取当前传递回来的值,如果有UART中断,此时这个值又会改变.同样临界段就是保护这类全局变量,如在读取时间节拍时,不应该被时钟更新时钟 ...

  8. Java中的instanceof和isInstance基础讲解

    1. instanceof 是一个操作符 使用方法: ? 1 2 if(a instanceof B){ } 表示:a 是不是 B 这种类型 2. isInstance是Class类的一个方法 ? 1 ...

  9. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  10. Java之判断大整数是否为平方数

      在本篇博客中,我们将讨论如何使用有效的算法来判断一个大整数是否为平方数.   给定正整数\(n\),如果存在一个整数\(m\),满足\(m^{2}=n\),那么则称\(n\)为平方数.因此,判断一 ...