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. 浅入浅出Typescript Decorators

    临时起的兴趣,想写一篇关于ts decorator的文章,就花小半天整理了一下...  这东西,在ES2017里好像也有... 文档的话看这里. 因为临时,就没想写太多文字介绍,带少许文字说明直接开撸 ...

  2. TCPWrap的使用配置

    参考地址: http://www.softpanorama.org/Net/Network_security/TCP_wrappers/index.shtml http://generationip. ...

  3. 3.Magicodes.NET框架之路——预览（一）

    3.Magicodes.NET框架之路——预览(一) 前言 一眨眼,已经过去两个多月了 ,哥已经火力全开了(业余时间和精力,甚至为此放弃了各种私活),所以大家不要抱怨慢哈.编程犹如逆水行舟,不进则退. ...

  4. nginx部署django应用

    Django部署方式有很多种,之前写过一篇部署在Apache上的博文:https://www.cnblogs.com/shenh/p/7552722.html .下文介绍的是通过Nginx来部署. N ...

  5. Go基础系列：Go slice详解

    slice表示切片(分片),例如对一个数组进行切片,取出数组中的一部分值.在现代编程语言中,slice(切片)几乎成为一种必备特性,它可以从一个数组(列表)中取出任意长度的子数组(列表),为操作数据结 ...

  6. 翻译：update语句(已提交到MariaDB官方手册)

    本文为mariadb官方手册:UPDATE的译文. 原文:https://mariadb.com/kb/en/update/ 我提交到MariaDB官方手册的译文:https://mariadb.co ...

  7. 在go modules中使用replace替换无法直接获取的package（golang.org/x/...）

    上一篇里我们介绍了使用go get进行包管理. 不过因为某些未知原因,并不是所有的包都能直接用go get获取到,这时我们就需要使用go modules的replace功能了.(当然大部分问题挂个梯子 ...

  8. C#操作DbCommand类

    一.常用属性 名称 说明 CommandText  获取或设置要对数据源执行的 Transact-SQL 语句.表名或存储过程 CommandTimeout 获取或设置在终止执行命令的尝试并生成错误之 ...

  9. 腾讯云图片鉴黄集成到C#

    官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: var urlList = new List& ...

  10. [android] 采用layoutInflater打气筒创建一个view对象

    上一节知道了ListView的工作原理,数据也展示出来了,但是TextView显示的非常难看,如果想美化一下,就先创建好一个布局出来,这个布局采用了两层LinearLayout嵌套,外层的水平方向,内 ...