浅谈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 相关文章推荐
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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
多重?l件?合查?(一)
2006/10/09 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
第四章 php数学运算
2011/12/30 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
javascript常用对话框小集
2013/09/13 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python文件操作类操作实例详解
2014/07/11 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python实现小世界网络生成
2019/11/21 Python
python解析多层json操作示例
2019/12/30 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
幼儿园保教工作总结2015
2015/10/15 职场文书