mouseover事件mouseenter事件
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事件的更多相关文章
- jQuery里的mouseover与mouseenter事件类型区别
JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...
- setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.
Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...
- mouseover事件与mouseenter事件的区别
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同
二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...
- 一个例子说明mouseover事件与mouseenter事件的区别
<html> <head> <meta charset="UTF-8"> <title>haha</title> < ...
- mouseover和mouseenter两个事件的区别
mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素 ...
- 事件处理& 事件委托& 区别mouseover与mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复
滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...
随机推荐
- Go语言备忘录:基本数据结构
本文内容是本人对Go语言的变量.常量.数组.切片.映射.结构体的备忘录,记录了关键的相关知识点,以供翻查. 文中如有错误的地方请大家指出,以免误导!转摘本文也请注明出处,多谢! 参考书籍<Go语 ...
- Kindle 推送教程:教你用电子邮箱推送电子书
Kindle 推送是什么意思?如何通过电子邮件附件推送?或许刚刚接触 Kindle 的朋友对这个概念不是很清楚,其实所谓 Kindle 推送是指亚马逊提供的一个"Kindle 个人文档服务& ...
- JS -- Variables As Properties
Variables As Properties When you declare a global JavaScript variable, what you are actually doing i ...
- Hex to Int 【十六进制转十进制】
long HexToInt(char *msgline){ long strlength,chvalue,tvalue; WORD i; chvalue=0; strlengt ...
- Vi快捷操作 vim配置【shell文件格式从windows转换为linux】
vim配置 http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html gg 首行 dd 删除当前行 :.,$d 删除全部内容 :se ...
- 《深入浅出设计模式》读书笔记 C#版(第一章)
原始需求和设计 事情是这样开始的,公司需要做一套程序,鸭子,设计如下: 一个鸭子父类,多个派生类,三个可override的方法. 第一次需求变更 我们要会飞的鸭子!!!!! 所以我们做了如下的更改: ...
- centos7基础学习第一天
Linux是一个操作系统: 智能手机,Android和ios.Windows: 网站.游戏.QQ.微信等都是运行在Linux系统之上的应用:客户端.服务器端交互的: Linux的起源: Linux之前 ...
- Simple Validation in WPF
A very simple example of displaying validation error next to controls in WPF Introduction This is a ...
- gitlab实时备份方案(非官方命令)
gitlab自带的备份功能做不到实时备份,为了尽可能减少意外情况导致的丢失数据,自己搞了一个实时备份的功能. 备份的大头主要是两部分,数据库和代码库.数据库由DBA配置主备. 仓库经过测试,通过lsy ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...