浅谈JQ中mouseover和mouseenter的区别


Posted in Javascript onSeptember 13, 2016

mouseenter事件只会触发一次,触发对象是注册对象或者注册对象的子元素

mouseover事件可以触发多次,触发对象是注册对象或者注册对象的子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p> 
  <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p> 
  <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> 
    <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2> 
  </div> 
  <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> 
      <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2> 
  </div> 
  <script>
    var x = 0,y = 0;
    var div1 = document.getElementsByClassName("over")[0];
    div1.addEventListener("mouseover",function(){
      var span = this.getElementsByTagName("span")[0]
      span.innerText = (x +=1);
      span.style.cssText = "border:2px red solid;";
    },false);
    
    var div2 = document.getElementsByClassName("enter")[0];
    div2.addEventListener("mouseenter",function(){
      var span = this.getElementsByTagName("span")[0]
      span.innerText = (y +=1);
      span.style.cssText = "border:2px red solid;";
    },false);
  </script>
</body>
</html>

以上这篇浅谈JQ中mouseover和mouseenter的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
浅谈JS的基础类型与引用类型
Sep 13 #Javascript
JavaScript简单下拉菜单特效
Sep 13 #Javascript
javascript特殊文本输入框网页特效
Sep 13 #Javascript
浅谈JS之iframe中的窗口
Sep 13 #Javascript
JS给swf传参数的实现方法
Sep 13 #Javascript
JS之相等操作符详解
Sep 13 #Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 #Javascript
You might like
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python常见数据结构详解
2014/07/24 Python
python中requests模块的使用方法
2015/04/08 Python
详解Python发送邮件实例
2016/01/10 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
总经理岗位职责说明书
2014/07/30 职场文书
导师工作推荐信
2015/03/27 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript