浅谈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代码
Aug 13 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
浅谈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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
javascript,jquery闭包概念分析
2010/06/19 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
django批量导入xml数据
2016/10/16 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Sanic框架配置操作分析
2018/07/17 Python
python求最大值最小值方法总结
2019/06/25 Python
解决Django连接db遇到的问题
2019/08/29 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python和php学习哪个更有发展
2020/06/17 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
大学校园活动策划书
2014/02/04 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
辩护词格式
2015/05/22 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
Ruby处理CSV数据方法详解
2022/04/18 Ruby
Python OpenGL基本配置方式
2022/05/20 Python