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. 浅谈React16框架 - Fiber

    前言 React实现可以粗划为两部分:reconciliation(diff阶段)和 commit(操作DOM阶段).在 v16 之前,reconciliation 简单说就是一个自顶向下递归算法,产 ...

  2. (转)python异步编程--回调模型(selectors模块)

    原文:https://www.cnblogs.com/zzzlw/p/9384308.html#top 目录 0. 参考地址 1. 前言 2. 核心类 3. SelectSelector核心函数代码分 ...

  3. vue 项目实战 (生命周期钩子)

    开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个)        1. beforeCreate             刚 new了一个组件,无法访问到数据和真实的do ...

  4. 【云服务器部署】---Linux下安装nginx

    [云服务器部署]---Linux下安装nginx 之前两篇,分别讲了:Linux下安装MySQL  和  springboot项目部署云服务器 nginx安装也是挺简单的.具体步骤如下: 第一步,下载 ...

  5. DDD实战进阶第一波(十三)：开发一般业务的大健康行业直销系统（订单上下文领域逻辑）

    前一篇文章主要讲了订单上下文的POCO模型,其中订单与订单项中有大量的值对象.这篇文章主要讲讲这些值对象以及订单项.订单相关的领域逻辑. 1.ProductSKUs值对象领域逻辑:ProductSKU ...

  6. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  7. 比MySQL快6倍 深度解析国内首个云原生数据库POLARDB的“王者荣耀”

    随着移动互联网.电子商务的高速发展,被使用最多的企业级开源数据系统MySQL面临着巨大挑战——为迎接“双11"的高并发要提前做好分库分表;用户不断激增要将读写分离才能应对每天上亿次的访问,但 ...

  8. 为什么使用SLF4J比使用log4j或者java.util.logging更好

    1.SLF4j是什么? SLF4J 并没有真正地实现日志记录,它只是一个允许你使用任何java日志记录库的抽象适配层. 如果你正在编写内部或者外部使用的API或者应用库的话,如果使用了slf4j,那么 ...

  9. ZooKeeper系列(3)：znode说明和znode状态

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk 1.znode znode的官方说明:http://zookee ...

  10. Tomcat类加载架构

    前言 主流的Java Web服务器(Tomcat.Jetty.WebLogic.WebSphere等)都有多个自定义的类加载器以及具备的类加载优势,本篇博文主要是通过以Tomcat为例简单认识Java ...