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用于取得滚动距离的属 ...
随机推荐
- 详解AngularJS中的依赖注入
点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...
- 【转载】关于api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案
关于api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案 目录 关于api-ms-win-crt-runtimel1-1-0dll缺失的解决方案 目录 安装VC redite ...
- mybatis枚举映射成tinyint
第一步:定义顶级枚举接口 public interface BaseEnum<E extends Enum<?>, T> { public T getCode(); publi ...
- 增大hadoop client内存
export HADOOP_CLIENT_OPTS="-Xmx512m $HADOOP_CLIENT_OPTS" 问题场景:sqoop import时报OOM
- H5音频处理的一些小知识
前 言 LiuDaP 十一过后,小编要做一个关于音乐播放器的项目,要用到大量H5音频处理的内容,于是在十月一日国庆黄金周闲暇之际,自己学习了一下H5音频的相关内容.虽然自学的没有那么深入,但是对 ...
- python之路第五篇之装饰器:(进阶篇)
装饰器: 学前必备知识: def f1(): print "f1" f1() #表示函数执行 f1 #表示函数,指向内存地址 f1 = lambda x: x + 1 f1() # ...
- 详细分析apache httpd反向代理的用法
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- 【记录】Spring项目转化为Spring Web项目
前言 在将Spring项目转化为Spring Mvc项目时出现了点问题,总是无法成功部署,查阅资料也并没有找到一个完美的解决方案,最后是参考在idea中创建maven web app项目后的目录才成功 ...
- C#仪器数据文件解析-Word文件(doc、docx)
不少仪器数据报告输出为Word格式文件,同Excel文件,Word文件doc和docx的存储格式是不同的,相应的解析Word文件的方式也类似,主要有以下方式: 1.通过MS Word应用程序的DCOM ...
- [解读REST] 6.REST的应用经验以及教训
衔接上文[解读REST] 5.Web的需求 & 推导REST,上文根据Web的需求推导出了REST架构风格,以及REST的详细描述和解释.自从1994年以来,REST架构风格被用于指导Web架 ...