浅谈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 快捷键设置实现代码
Mar 13 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
详解小程序横屏方案对比
Jun 28 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
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
酒店应聘自荐信
2013/11/09 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
法院答辩状格式
2015/05/22 职场文书
党支部评议意见
2015/06/02 职场文书
早安问候语大全
2015/11/10 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
python析构函数用法及注意事项
2021/06/22 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL