1、

mouseover:会在鼠标进入该元素或者该元素的子元素时触发

mouseenter:只在鼠标进入该元素时触发

mouseout:在鼠标移出该元素或则该元素的子元素时触发

mouseleave:只在鼠标离开该元素时触发

所以在整个过程中,mouseenter mouseleave只触发一次。over和out触发多次(每次进入和退出子元素都会触发)

    var odiv = document.getElementById('outer');
odiv.addEventListener('mouseenter',enterHandler,false);
odiv.addEventListener('mouseover',overHandler,false);
odiv.addEventListener('mouseout',outHandler,false);
odiv.addEventListener('mouseleave',leaveHandler,false); function enterHandler(){
console.log('触发enter事件');
}
function overHandler(){
console.log('触发over事件');
}
function outHandler(){
console.log('触发out事件');
}
function leaveHandler(){
console.log('触发leave事件');
}

mouseover事件mouseenter事件的更多相关文章

  1. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  2. setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

    Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...

  3. mouseover事件与mouseenter事件的区别

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...

  4. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  5. 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同

    二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...

  6. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

  7. mouseover和mouseenter两个事件的区别

    mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素 ...

  8. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

    滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...

随机推荐

  1. Spring中的Service/DAO/DTO

  2. HTML 简述

    1.本页超链接 <a href="#t">查看 Chapter 4.</a> <a name="t">Test</a& ...

  3. 洗礼灵魂,修炼python(5)--python操作符,内置函数

    前面提到了BIF(内置函数)这个概念,什么是内置函数,就是python已经定义好的函数,不需要人为再自己定义,直接拿来就可以用的函数,那么都有哪些BIF呢? 可以在交互式界面(IDLE)输入这段代码, ...

  4. Cow Exhibition 变种背包

    Cow Exhibition Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Subm ...

  5. 闲聊DOS命令

    使用DOS命令进入指定文件夹打开文本文件: 回车确定 先进入F盘: 回车后输入:  F: 然后回车就进入了F盘,如下图: 然后比如我们要打开 F:\电脑桌面文件\hosts文件.txt文件,打开步骤如 ...

  6. webpack2使用ch7-loader解析css 自动添加浏览器前缀

    1 目录结构  安装的依赖 "autoprefixer": "^6.7.7", "css-loader": "^0.28.0&qu ...

  7. Java面向对象 String 基本数据类型对象包装类

      Java面向对象  String 知识概要:              (1)String的用法详解 (2)基本数据类型对象包装类 String          顾名思义,该类主要是对字符串 ...

  8. Android 性能测试之方向与框架篇

    假期结束,你的状态有没有回归?那么,放空脑袋后,先来学习学习,欢迎大家继续关注腾讯云技术社区. 作者:李帅 导语 借项目的开发周期,把思考了一段时间的场景化性能测试框架搭建起来,包括 耗电性能测试.内 ...

  9. Jquery qTip2实现多种提示效果,支持ajax,以及多种样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. java类加载小记

    java类只有当创建实体或被调用时才会加载,加载时按 编码顺序 先加载static后加载普通的.static模块和static变量都是同一等级的,谁写前面就先加载谁. 在调用某个静态类的方法时,会按编 ...